将Background-color属性应用于div不能按预期工作

Question

我这里有什么问题？ 该页面实际上分为5个div，代表左，中和右页面列的中间3个div包裹在一个具有id内容的div中。 如果您要查看源代码，我已链接到该页面。 当我尝试时，它不会很好地作为摘要显示在此消息中。

这是#content的样式

    #content
{
    background-color:White; 
}       

如何使#content的整个背景显示为白色？ 链接到http://beta.sc-pa.com/的实时版本

ps：有关该网站的任何其他建议将不胜感激

Answer 1

在<br style="clear:both"/> div的末尾（在#content内）后添加<br style="clear:both"/> 。

当您将元素浮动在容器内时，这些元素可以延伸到框的边界之外-它“浮动”在框的上方。 为了遵守边界，您必须通过向容器添加清除元素（在本例中为br）作为子元素来“清除”浮动元素。

IE在很多时候也有时髦的要求，因此搜索“ ie clearfix”来查找样式使其表现得像普通浏览器一样：）

为了澄清起见，容器div中任何非浮动元素都会影响容器的高度。 因此，如果您有一些带有文本的段落元素，则容器div只能与该内容一样高，因为它是内联的而不是浮动的。

将清除元素视为对边界的重置。 之后，一切恢复正常，并将继续扩大容器div的高度。

Answer 2

问题是#content内的div是浮动的，当一个块元素内部有浮动的项目时，它没有定义的高度，您需要为#content使用定义的高度（这可能不是您想要的高度，因为它不会扩展），或使用已设置clear属性的元素。

在其余所有元素放到#content内的示例后

<br style="clear:both; height:0px;">

你最终会得到

<div id="content">
    <div id="left_content"></div>
    <div id="main_content"></div>
    <div id="right_content"></div>
    <br style="clear:both; height:0px;">
</div>

>

Answer 3

在#content ID中添加float：left。 请记住，如果在容器中添加div并将其浮动，则包含的div不再具有高度或宽度。 您可以为该容器分配一个固定的或高度，我不建议您使用此容器，也可以将#content浮动到左侧，这将解决您的问题。

Answer 4

添加overflow:visible您的#content div overflow:visible 。