it-swarm.com.ru

Сделать внешний div автоматически равным его высоте с плавающим содержимым

Я хочу, чтобы внешний div, который был черным, обернул свои divs, плавающие в нем. Я не хочу использовать style='height: 200px в div с идентификатором outerdiv, так как я хочу, чтобы он автоматически соответствовал высоте его содержимого (например, плавающее divs).

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

Как этого добиться?

90
Jase Whatson

Вы можете установить CSS outerdiv к этому

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

Вы также можете сделать это, добавив элемент в конце с помощью clear: both. Это может быть добавлено как обычно, с помощью JS (не очень хорошее решение) или с помощью псевдоэлемента CSS :after (не поддерживается в старых IE).

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

Вы также можете попробовать переместить родительский контейнер, но в зависимости от вашего дизайна это может быть невозможно/сложно.

156
alex

Во-первых, я настоятельно рекомендую вам делать ваши стили CSS во внешнем файле CSS, а не делать их встроенными. Это намного проще в обслуживании и может быть более пригодно для повторного использования с помощью классов.

Отработав ответ Алекса (& clearfix Гаррета) о "добавлении элемента в конце с помощью clear: both", вы можете сделать это так:

    <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

Это работает (но, как вы видите, встроенный CSS не так хорош).

14
Lycana

Вы можете попробовать самозакрывающиеся поплавки, как подробно описано на http://www.sitepoint.com/simple-clearing-of-floats/

Поэтому, возможно, попробуйте либо overflow: auto (обычно работает), либо overflow: hidden, как сказал Алекс.

7
DarkWulf

Я знаю, что некоторые люди будут ненавидеть меня, но я нашел display:table-cell, чтобы помочь в этих случаях.

Это действительно чище.

4
Nande

Прежде всего, вы не используете width=300px, который является настройкой атрибута для тега, а не CSS, вместо этого используйте width: 300px;.

Я бы предложил применить технику clearfix к #outerdiv. Clearfix - это общее решение для очистки 2 плавающих элементов div, чтобы родительский элемент div расширился до 2 плавающих элементов.

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

Вот пример вашей ситуации и того, что Clearfix делает для ее решения.

3
Garrett

Используйте jQuery:

Установите Parent Height = Child offsetHeight.

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}
1
Harpal

Используйте clear: both;

Я потратил больше недели, пытаясь понять это!

0
RonanC