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

Question

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

Отработав ответ Алекса (и исправление Гаррета) о "добавлении элемента в конце с помощью 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 не так хорош).

Answer 3

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

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

Answer 4

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

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

Answer 5

Прежде всего, вы не используете 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 делает для ее решения.

Answer 6

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

Установить родительскую высоту = дочернее смещениеВысота.

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

Answer 7

Использование clear: both;

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