所以我使用 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 列吗?
只需将此额外规则添加到您的选择器中即可:
div.frame {
overflow:hidden;
}
除非您有来自框架之外的元素,否则您不需要依赖clearfix,也不应该依赖clear:both 的任何无关标记。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)