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

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

Я знаю, что могу использовать float: осталось на них, и это будет работать... но на шагах 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>

Ответ 1

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

.container div {
  display: inline-block;
}

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

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

Ответ 2

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

display:inline-block;

Попробуйте...

Другой способ - разместить их, используя:

position:absolute;
left:0;

и/или

position:absolute;
right:0;

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

Ответ 3

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

Итак, если функции 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>.

Ответ 4

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

margin: -200px 0 0 350px;

Ответ 5

Вы также можете использовать макет 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.

Ответ 6

Используйте display:table-cell; для удаления пробела между .Left и .Right

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>