Зробіть зовнішній div автоматично таким самим висотою, як його плаваючий вміст

Я хочу, щоб зовнішній div, чорний, загортав його divплаваючі всередині нього. Я не хочу використовувати 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>

Як цього досягти?

Ви можете встановити outerdivCSS для цього

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

Ви також можете зробити це, додавши елемент в кінці за допомогою clear: both. Це можна додати звичайно, з JS (невдале рішення) або з :afterпсевдоелементом CSS (не широко підтримується в старих IE).

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

Ви також можете спробувати плаваючий батьківський контейнер, але залежно від вашого дизайну це може бути неможливо / складно.

По-перше, я настійно рекомендую вам робити стиль CSS у зовнішньому файлі CSS, а не робити це вбудовано. Це набагато простіше в обслуговуванні і може бути більш багаторазовим за допомогою класів.

Опрацювавши відповідь Алекса (& clearrefix Гаррета) про "додавання елемента в кінці з 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 не такий гарний).

Можливо, ви захочете спробувати самозакриваються поплавці, як це докладно на http://www.sitepoint.com/simple-clearing-of-floats/

Тож, можливо, спробуйте або overflow: auto(зазвичай це працює), або overflow: hidden, як сказав Алекс.

Я знаю, що деякі люди будуть мене ненавидіти, але я знайшов display:table-cellдопомогу у цих випадках.

Це дійсно чистіше.

Перш за все, ви не використовуєте 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 для її вирішення.

Використовуйте jQuery:

Встановити батьківський зріст = Child offsetHeight.

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

Використовуйте clear: both;

Я витратив більше тижня, намагаючись це зрозуміти!