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

Я хочу внешний 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>

Как это сделать?

Ответ 1

Вы можете установить outerdiv CSS для этого

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

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

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

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

Ответ 2

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

Откликваясь от ответа Alex (& Garret 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 не так хорош).

Ответ 3

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

Итак, попробуйте либо overflow: auto (обычно работает), либо overflow: hidden, как сказал alex.

Ответ 4

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

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

Ответ 5

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

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

<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 делает для ее устранения.

Ответ 6

Использовать jQuery:

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

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

Ответ 7

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

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