Цвет фона для div с дочерними divs

<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
</style>
</head>

<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>

</body>
</html>

Почему не отображается цвет фона между этими двумя div?

Ответы

Ответ 1

Когда вы плаваете элементы, вы должны предоставить ширину перемещаемых элементов. В противном случае вы можете столкнуться с неожиданным поведением в разных браузерах.

Проверьте этот учебник, есть хорошая информация о плавании в css. [link is dead]

В принципе, если вы предоставите overflow:hidden; для контейнера div и укажите ширину для перемещаемых элементов, ваша проблема будет решена.

<div style="overflow: hidden;">
  <div style="float:left; width: 300px;">Some text</div>
  <div style="float:right; width: 300px;">Some text</div>
</div>

Аналогично, вы можете добавить еще один div, где бы вы ни хотели нормализовать поток, следующим образом:

<div>
  <div style="float:left; width: 300px;">Some text</div>
  <div style="float:right; width: 300px;">Some text</div>
  <div style="clear:both;"></div>
  <div>This div will be at the same place 
       as if the previous elements are not floated</div>
</div>

Оба будут работать:)

ИЗМЕНИТЬ

Другим методом, который я часто использую в наши дни, является плавающий первый элемент и набор margin-left для следующего элемента. Например:

<div>
    <div style="float: left; width: 300px;">Some text</div>
    <div style="margin-left: 300px;">Some text</div>
    <div style="clear: both;"></div>
</div>

Преимущество этого метода заключается в том, что следующий элемент (второй div в этом случае) не нуждается в фиксированной ширине. Кроме того, вы можете пропустить третий div (clear: both;). Это необязательно. Я просто добавляю его в случае, если floated div больше по высоте, чем второй div, так как если вы его не добавите, родительский div всегда будет получать высоту второго div.

Ответ 2

Просто установите контейнер div в overflow: hidden;.

Если вы установите элементы для float, они больше не будут в нормальном "потоке" документа.

div { background: #ccc; overflow: hidden; }

И вы даже не сделали свободный круг;)

Ответ 3

Плавающий элемент не влияет на размер родителя, если только родительский элемент не содержит детей, использующих стиль overflow.

Ваш внешний div имеет те же цвета фона, что и дочерние div, но высота родителя равна нулю, поэтому вы не видите его фона.

Ответ 4

Это потому, что плагин div плавает, поэтому содержащая div не имеет высоты. Если бы вы добавили третьего дочернего div, который не был float, дайте ему высоту 0 и clear:both, вы должны увидеть цвет фона.

Ответ 5

Белое пространство, которое вы показываете, является частью тела, и вы устанавливаете цвет фона в div, но не в теле. Именно по этой причине часть тела пуста.

Чтобы покрасить пустую часть, вы должны добавить следующий код:

<html>
<head>
    <style type="text/css">
 div
 {
 background-color:#ccc;
 }
 body{
 background-color:#ccc;
 }
</style>
</head>

<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>

</body>
</html>

Вы можете изменить цвет фона тела, изменив цвет фона в стиле тела.