CSS Parent-Child height

Question

У меня есть некоторые проблемы с этими фрагментами кода:

CSS:

#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

HTML:

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
</div>

Высота левого блока равна 80px, а высота правого элемента равна 150px. Я хотел бы, чтобы эта вещь выглядела так: http://img408.imageshack.us/img408/9978/dream.th.jpg На скриншоте выше от IE, когда я использую IE, эти фрагменты работают отлично. Но когда я использую другой браузер (Opera, FF, Safari, Chrome), я получаю это: http://img408.imageshack.us/img408/869/fact.th.jpg

Это не круто ... Я хочу, чтобы высота родительского (#wrapper) элемента получала большую высоту двух дочерних элементов.

Answer 1

CSS

#wrapper:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;}

Answer 2

Это ошибка в IE.

Содержит поплавки объясняет, почему вы видите такое поведение, тогда как Методы для удержания поплавков дают лучшие решения, чем добавление дополнительной разметки.

Answer 3

Лучшее решение, которое я нашел, похоже на вышеприведенное описание Родриго, но без необходимости использования пробела в содержимом (и, следовательно, также не нужно указывать размер шрифта). Если вы сделаете его классом, вы можете применить его к любому блоку контейнера, а не только к вашей оболочке. (Я также чувствую, что лучше не вводить идентификатор, но это другой вопрос.)

.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}
*:first-child+html .clearfix { /* Optional fix for IE7 */
    zoom: 1; 
}

Answer 4

Просто установите стиль переполнения родительского объекта на что-либо кроме видимого, и он будет охватывать дочерний контент.

Answer 5

Когда два элемента (ов) плавают в контейнере, который не имеет фиксированную высоту (или его высота меньше максимальной высоты содержимого элемента (ов)), ваш контейнер сворачивается в пиксельную линию и ваш плавающий элемент (s) переполнить контейнер.

Чтобы контейнер содержал два элемента div, вам необходимо очистить оба float перед закрытием контейнера! Другими словами ....

CSS

<style>
#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

.clearer{ clear: both;}
</style>

HTML

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
    <div class="clearer"></div>
</div>

Answer 6

Спасибо за быстрый ответ, Дэвид. Я не прочитал весь контент, который вы написали (две ссылки), но я нашел решение по второй ссылке. Я добавил дополнительный div с надписью «clear: both»; в контейнер, и он работает! Благодарю. Мэтт Болл: спасибо, но я бы хотел, чтобы эта штука динамично росла