2012-03-25 4 views
0

сказать, например, у меня есть 2 DIV в DIV, как этотHTML DIV плавающий фон вопрос

<div style="width: 300px; backround-color: #000000;"> 
    <div style="height: 300px; width: 150px; float: left; background-color: #00ff00; color: #ffffff;">This is left</div> 
    <div style="float: right; width: 150px; background-color: #ff0000; color: ##ffffff;">This is right</div> 
</div> 

Теперь мой вопрос, почему я не могу видеть мой фон черный цвет ниже реф, если зеленый ДИВ 300 пикселей в высоту.

+0

No-repro в Chromium 17, работающий на Ubuntu 11.04: http://jsfiddle.net/davidThomas/K9Qye/1/ (отредактированный, чтобы обновить ссылку и исправить ошибку орфографии, отмеченную Брайаном Гувером, которую я [первоначально пропустил ] (http://jsfiddle.net/davidThomas/K9Qye).) –

ответ

5

Текста поток «убит», если вы используете float: ...;

Что вы можете сделать, это сказать, где текст поток должен быть после элементов с атрибутом float с атрибутом «clear».

Вы можете сделать:

<div style="width: 300px; backround-color: #000000;"> 
    <div style="height: 300px; width: 150px; float: left; background-color: #00ff00; color: #ffffff;">This is left</div> 
    <div style="float: right; width: 150px; background-color: #ff0000; color: ##ffffff;">This is right</div> 
    <div style="clear: both;"></div> 
</div> 
+0

Что это связано с вопросом? – justanotherhobbyist

+0

Это просто. Если вы определяете, где текстовый поток должен быть после div-элементов, div-элементы выше рассматриваются как текст, и фон будет виден. (Извините, очень сложно объяснить по-английски) –

3

DIVs не очень хорошо справляются с высотой встроенных поплавок. Вы можете решить эту проблему несколькими способами. Самый простой способ - дать понять: оба div до конца внешнего div.

<div style="width: 300px; background-color: #000000;"> 
    <div style="height: 300px; width: 150px; float: left; background-color: #00ff00; color: #ffffff;">This is left</div> 
    <div style="float: right; width: 150px; background-color: #ff0000; color: ##ffffff;">This is right</div> 
    <div style="clear:both;"></div> 
</div> 

Это также помогает заклинанию цвета фона праву :)

-1

Это потому, что вы не определить высоту обертывание дивы. Чтобы увидеть фон, вы должны иметь его больше, чем внутри.

Также удалите одну из # в color: ##ffffff;".

+0

То неправильно. Вам не нужно определять высоту родительского элемента, чтобы увидеть фон. –

+0

Если в дочернем div есть другой цвет, вы можете сделать это, добавление или маржа могут сделать это, но если они являются точным размером, дочерний div блокирует родительский div ... Он имеет зеленый и красный цвета в своих дочерних div. прочитайте код. – justanotherhobbyist

+0

будет работать лучше, потому что вам не нужно определять высоту (возможно, это изменится, и это не сработает, ...). В коде только первый childNode имеет высоту 150 пикселей, а другая не имеет определенной высоты. Таким образом, детдомы не будут иметь точный размер. –

0

Вместо ясно, я обнаружил, что я мог бы добавить

overflow: hidden; 

в CSS объемлющего Div в.

Смежные вопросы