背景和 CSS 浮动
所以我使用 960 网格系统，发现了一些他们不支持的东西。我考虑过切换到蓝图，但我必须在此过程中稍后再回到设计。不管怎样，我已经简化了我的代码来展示我正在经历的事情：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test CSS</title>
<style type="text/css">
.frame { width: 960px; margin-left: auto; margin-right: auto; }
.column { display: inline; float: left; position: relative; margin: 10px 10px 10px 10px; width: 300px; background-color: silver; }
#bkg { background-color: blue; }
</style>
</head>
<body>
<div class="frame" id="bkg">
<div class="column">Column A</div>
<div class="column">Column B<div><br/><br/><br/><br/></div></div>
<div class="column">Column C</div>
</div>
</body>
</html>
我试图看到背景扩展以覆盖所有 3 列。我可以做些什么来扩展背景，使其覆盖所有 3 列吗？
So I am using the 960 grid system and found a few things that they don't support. I've considered switching to Blueprint, but I've got to come back to the design a bit later in the process. Anyway, I've simplified my code to show what I'm experiencing:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test CSS</title>
<style type="text/css">
.frame { width: 960px; margin-left: auto; margin-right: auto; }
.column { display: inline; float: left; position: relative; margin: 10px 10px 10px 10px; width: 300px; background-color: silver; }
#bkg { background-color: blue; }
</style>
</head>
<body>
<div class="frame" id="bkg">
<div class="column">Column A</div>
<div class="column">Column B<div><br/><br/><br/><br/></div></div>
<div class="column">Column C</div>
</div>
</body>
</html>
I'm trying to see the background expand to cover all 3 columns. Is there anything I can do to expand the background so it covers all 3 columns?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
只需将这个额外的规则添加到您的选择器中即可：
除非您有元素位于框架之外，否则您不需要依赖clearfix，也不应该依赖clear:both 的任何无关标记。
Just add this extra rule to your selector:
You shouldn't need to rely on the clearfix unless you have elements coming outside of the frame, nor should you need to rely on any extraneous markup with clear:both.
您可以让框架浮动，如下所示：
这样就可以了。或者，您可以通过“明确修复”在框架中放置额外的元素。预制的 960 网格通过“clear”类为您完成此操作：
You can have the frame float as in:
and this does it. Or you can put an extra element in the frame with a "clear fix". The pre-made 960 grid does this for you with a class "clear":
您需要将
clearfix类应用于#bkg。You need to apply the
clearfixclass to #bkg.你要做的就是“清除浮动”。有很多选择，有些简单，有些则相当复杂。
最简单的方法是在最后一列之后添加一个清除 div，如下所示：
应该可以工作。
这里有一些其他方法（一些，纯CSS）：
What you want to do is "clear the float." There are many options out there, some easy, and some quite complex.
The easiest, is to add a clearing div after the last column, like this:
And that should work.
Here are some other ways (some, pure css):