CSS высота Parent-Child

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

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

Answer 1

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

Containing floats объясняет, почему вы видите это поведение, а Methods for Containing Floats дает лучшие решения, чем добавление дополнительной разметки.

Answer 2

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

Answer 3

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

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

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 4

CSS

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

Answer 5

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

Answer 6

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

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