Div бок о бок без поплавка

Как я могу сделать div 'left' и 'right' похожими на столбцы бок о бок?

Я знаю, что могу использовать float:left на них, и это будет работать... но на шаге 5 и 6 здесь http://www.barelyfitz.com/screencast...s/positioning/ парень говорит, что это возможно, но я не могу заставить его работать...

код:

<style>
div.left {
    background:blue;
    height:200px;
    width:300px;
}

div.right{
    background:green;
    height:300px;
    width:100px;
}

.container{
    background:black;
    height:400px;
    width:450px;
}
</style>

<div class="container">
        <div class="left">
            LEFT
        </div>
        <div class="right">
            RIGHT
        </div>
</div>
6 60
html css css-float

6 ответов:

обычный метод, когда не используется float s должен использовать display: inline-block: http://www.jsfiddle.net/zygnz/1/

.container div {
  display: inline-block;
}

обратите внимание на его ограничения, хотя: есть дополнительное пространство после первого блока - это потому, что два блока теперь по существу inline элементы, такие как a и em, так что пробелы между двумя счетами. Это может нарушить ваш макет и / или не выглядеть красиво, и я бы предпочел не удалять все пробелы между символами ради из этого работает.

поплавки также более гибкие, в большинстве случаев.

98

A div - это элемент уровня блока, что означает, что будет вести себя как блок, и блоки не могут оставаться бок о бок, не плавая. Однако вы можете установить их в встроенные элементы С:

display:inline-block;

дайте ему попробовать...

другой способ-разместить их с помощью:

position:absolute;
left:0;

и/или

position:absolute;
right:0;

Примечание: чтобы это работало как ожидалось, элемент оболочки должен иметь position:relative; так что элементы с абсолютным позиционированием остаются относительно своего элемента обертки.

19

вы также можете использовать CSS3 flexbox макет, который хорошо поддерживается в настоящее время.

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    background:black;
    height:400px;
    width:450px;
}

.left {
    flex: 0 0 300px;
    background:blue;
    height:200px;
}

.right {
    flex: 0 1 100px;
    background:green;
    height:300px;
}

Пример (с устаревшими стилями для максимальной совместимости) & узнать больше о flexbox.

2

В настоящее время я работаю над этим, и у меня есть уже целый ряд решений. Приятно иметь качественный сайт, который я могу использовать и для своего удобства. Потому что если вы не запишете эти вещи, вы в конечном итоге забудете некоторые части. И я также могу порекомендовать написать некоторые базовые, если вы начинаете какое-либо новое программирование/дизайн.

поэтому, если функции float вызывают проблемы, есть несколько вариантов, которые вы можете попробовать.

одно изменение div выравнивание в div тег он сам, как так <div class="kosher" align=left> Если это вас не устраивает, то есть еще один вариант с маржей, как так.

.leftdiv {
    display: inline-block;
    width: 40%;
    float: left;
}
.rightdiv {
    display: block;
    margin-right: 20px;
    margin-left: 45%;
}

не забудьте удалить <div align=left>.

2

вы можете попробовать с полями для правого div

margin: -200px 0 0 350px;
1

использовать display:table-cell; для удаления пространства между ними .Левый и .Правильно

div.left {
    background:blue;
    height:200px;
    width:300px;
}

div.right{
    background:green;
    height:300px;
    width:100px;
}

.container{
    background:black;
    height:400px;
    width:450px;
}

.container > div {
    display: table-cell;
}
<div class="container">
  <div>
    <div class="left">
      LEFT
    </div>
  </div>
  <div>
    <div class="right">
      RIGHT
    </div>
  </div>
</div>
0