бок о бок

Question

У меня есть 4 деления внутри родительского деления. Чтобы они отображались рядом, я назначил всем 4 элементам div стиль float: left. Элементы div отображаются рядом, но высота родительского элемента div не увеличивается, чтобы охватить высоту дочернего элемента div. Чего мне не хватает?

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

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

Answer 4

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

Answer 5

Если вы хотите, чтобы элементы div были рядом, попробуйте использовать встроенный блок:

<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>

Answer 6

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

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

Answer 7

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