背景和CSS浮点 [英] Background and CSS Floats
问题描述
所以我使用960网格系统，发现了一些他们不支持的东西。我考虑切换到蓝图，但我必须回到设计稍后的过程。无论如何，我简化了我的代码，以显示我遇到的：
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>
我试图看到背景展开覆盖所有3列。有没有什么我可以做的扩展背景，所以它涵盖所有3列？
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?
推荐答案
：
.frame { width: 960px; margin-left: auto; margin-right: auto;float:left}
或者你可以在框架中添加一个清除修复的额外元素。预制的960网格为您提供了一个类clear：
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":
(css .clearfix { clear: both } )
<div class="frame"
...
<div class="clearfix" /></div>
这篇关于背景和CSS浮点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
