Бок о бок divs

Ответ 1

После 4 разделов вам нужно "отменить" стиль поплавка. Это делается путем создания p, например: <p style="clear: both"></p> Ваш родительский div автоматически получит нужный размер.

Ответ 2

Это ошибка при реализации плавающих элементов и возникает, когда у вас есть родительский элемент, который содержит ничего, кроме плавающих дочерних элементов. Существует два способа его решения. Один из них заключается в том, чтобы установить родительский элемент overflow в значение hidden, иногда называемый методом переполнения. Другой известен как метод clearfix и предполагает использование псевдо-класса :after.

Метод clearfix имеет то преимущество, что позволяет определенным позиционным элементам "зависать" за пределами родительского контейнера, если вам когда-либо понадобится, за счет небольшого количества дополнительных CSS и разметки. Это метод, который я предпочитаю, поскольку я часто использую висячие элементы.

Ответ 3

Установите overflow: hidden; в родительском div.

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

Устанавливая свойство переполнения скрытым, родительский элемент учитывает ширину его дочерних элементов, но скрывает все, что выходит за пределы его ширины и высоты.

Конечно, другой вариант состоит в том, чтобы добавить элемент после плавающих divs внутри родителя с помощью clear: both;. Это делает последний элемент позиционированным после всех поплавков в рамках обычного потока документов. Поскольку он внутри родителя, высота родителя равна высоте высотных элементов, а также регулярному отступу и высоте очищенного элемента.

Ответ 4

Ответ на миллинет будет работать, или вы можете плавать родительский div, который также позволит ему расширяться, чтобы содержать его содержимое

Ответ 5

Я думаю, вы должны предоставить родительскому div высоту 100%, не фиксированную так, чтобы она охватывала высоту дочерних div, если они растут.

Ответ 6

Я также рекомендую метод clearfix. Эта проблема возникает из-за того, что плавающий элемент удаляет любую высоту, которую он обычно содержит.

PositionIsEverything публикует полное объяснение, а также соответствующие решения для IE6, поскольку: после псевдоселектора не поддерживается более старыми браузерами.

Ответ 7

Если вы хотите, чтобы divs были бок о бок, вы можете попробовать использовать встроенный блок:

<style>
    .alldivs {
        display: inline-block;
    }
</style>

<div id="wrapper">
    <div id="div1" class="alldivs"></div>
    <div id="div2" class="alldivs"></div>
    <div id="div3" class="alldivs"></div>
    <div id="div4" class="alldivs"></div>
</div>