0

我正在使用 12 列 960 网格系统来设计我的布局。这是我的 HTML 代码

<div class="topStrip"></div>
    <div class='container_12 content'>
        <div class="topStrip"></div>
        <div class="menuStrip">
            <div class="grid_3 menu"></div>
        </div><!-- end menuStrip -->
        <div class="mainContent">
            <div class="grid_4  dash_1"></div>
        </div><!-- end mainContent -->
        <div class="footer"></div>
    </div><!-- end content -->

您可以在下面提供的 jsFiddle 链接中检查 CSS。

问题是.mainContentDiv 中的字段，即.dash_1超出了.contentdiv - jsFiddle。

但是，如果我从内部的 div中删除.grid_4and 增加，它会相应地扩展 - jsFiddle。.dash_1.mainContent

这可能是 CSS 的一个简单问题，但是我正在努力寻找它。提前致谢。

4

2 回答 2

1

你的grid_4有浮动。你必须清除他的父母（mainContent）。像这样写：

.mainContent {
    overflow: hidden;
    position: relative;
    margin-top: 50px;
}

阅读更多http://www.quirksmode.org/css/clearing.html

检查这个http://jsfiddle.net/PmKPb/8/

于 2012-09-12T08:53:50.243 回答
0

That is because grid_4 width is 300px

See this 

.container_12 .grid_4 {
    width:300px;
}
于 2012-09-12T08:53:52.613 回答