html - 背景和 CSS float

标签 html css grid-layout

所以我正在使用 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 的任何无关标记。

关于html - 背景和 CSS float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1495952/

相关文章:

java - 网格布局和鼠标监听器

HTML 网格系统,其中具有不同高度的元素将自动占用可用空间

html - 内联 block 不会以某种方式显示在一条直线上

javascript - 下拉复选框和未选中的父元素?

css - 特殊字符的回退字体

html - Foundation 5 网格推拉

javascript - 通过单击 Bootstrap 表格单元格来选中复选框

html - css,嵌套 flexbox 的高度在 Chrome 中不正确

css - 当滚动条出现在 div 中时如何更改 css

components - Vaadin - 在 Vaadin 的网格布局中展开组件