背景和 CSS 浮动

https://stackoverflow.com/questions/1495952

19-09-2019
|

题

所以我使用 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 列吗？

解决方案

可以具有框架浮动如：

.frame { width: 960px; margin-left: auto; margin-right: auto;float:left}

和这样做它。或者，你可以把一个额外的元素在框架与“清除修复”。预发960网为您完成此一类“明确”：

(css  .clearfix { clear: both } )
<div class="frame"
   ...
<div class="clearfix" /></div>

其他提示

只要加入这个额外的规则，以你的选择：

div.frame {
     overflow:hidden;
}

您应该不需要靠clearfix除非你有未来的框架之外的元素，也不应该需要依靠任何多余的标记清晰的：既

您需要应用clearfix类#bkg。

<div class="frame clearfix" id="bkg">

您想做的是“清除浮子”。那里有很多选择，有些容易，有些很复杂。

最简单的方法是在最后一列之后添加一个清除 div，如下所示：

<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 style="clear: both;"></div>
</div>

然后应该工作。

这里有一些其他的方式（一些，纯css）：

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow