css - 获取 CSS 背景以覆盖众多 div

Question

目前，我有两个设置为“float:left;”的 div 标签 我想对两者都应用背景颜色，但每个都可以根据内容的大小而有所不同。我尝试添加一个额外的 div 并为其应用背景颜色但没有高度？这是我的测试页面：http: //joshblease.co.uk/wp-content/themes/rounded/test.php

谢谢，乔希。

Answer 1

我懂了。您希望背景是浮动 div 的极端周围的一个框吗？

默认情况下，父 div 不会扩展以包含浮动子级。有一些解决方法：

• 将父 div 设置为具有overflow: hidden或overflow: auto。
• 在父元素 ( ) 之后添加一个空元素#back，并将其设置为clear: both。
• 使用 css 自动执行上述操作：

#back:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

其中任何一个都应该适合你。

Answer 2

以下方法避免了该overflow方法在某些情况下可能出现的一些问题。根据我对您的测试页标记的理解，此 CSS 使用您的 div ID。

#back {
    *zoom: 1;
}
#back:after {
    content: "";
    display: table;
    clear: both;
}

如果您希望搜索和阅读更多内容，这称为清除浮动或“clearfix”。