带有子 div 的 div 的背景颜色答案

【问题标题】：Background color for div with child divs带有子 div 的 div 的背景颜色
【发布时间】：2012-01-13 15:59:10
【问题描述】：

<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 之间没有显示背景颜色？

【问题讨论】：

标签： html background-color

【解决方案1】：

当您浮动元素时，您应该提供浮动元素的宽度。否则您可能会在不同的浏览器中遇到意外的行为。

Check this tutorial，有很好的关于在 css 中浮动的信息。 [链接失效]

基本上，如果您向容器 div 提供 overflow:hidden; 并为浮动元素提供宽度，您的问题就会得到解决。

<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;)。这是可选的。我只是在浮动 div 的高度比第二个 div 长的情况下添加它，因为如果不添加它，父 div 将始终获得第二个 div 的高度。

【讨论】：

【解决方案2】：

只需将容器 div 设置为 overflow: hidden;。

如果您将元素设置为浮动，它们将不再处于文档的正常“流程”中。

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

而且你甚至没有徒手画圈；）

【讨论】：

【解决方案3】：

浮动元素不会影响父元素的大小，除非父元素明确包含使用overflow 样式的子元素。

您的外部 div 与子 div 具有相同的背景颜色，但父级的高度为零，因此您看不到它的背景。

【讨论】：

【解决方案4】：

这是因为 divs 都是浮动的，所以包含 div 没有高度。如果你要添加第三个孩子div 不是浮点数，给它一个高度0 和clear:both 你应该会看到背景颜色出现。

【讨论】：

呸！尽量不要使用clear: both hack。几乎总是有（/总是？）更好的解决方案。
看起来你今天学到了一些东西 :) 完成我的评论并进一步教育你 ;) 当你想使用 CSS3（例如阴影）时，使用 overflow: hidden; hack 时要小心。幸运的是，我们也有解决方案：fordinteractive.com/2009/12/goodbye-overflow-clearing-hack

【解决方案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>

你可以通过改变body style中的背景颜色来改变body背景颜色。

【讨论】：