1

我在 CSS 中进行布局时遇到了一些问题。这是我正在谈论的代码：Fiddle。

  1. 应该有我标记为红色的<div id="header">高度。<div id="menubuttons">我一直认为，如果您不说明 div 的高度，它将得到它的孩子的高度。
  2. 尽管我定义<div class="contentLine>了.<div id="theme">margin-top: 20px;
  3. 右列总是比左列有更大的边距。我希望两者对浏览器窗口具有相同的边距。

CSS

body {
    margin: 0 auto;
    padding: 0;
    font-family:'Share', cursive;
}
#header {
    width: 100%;
    vertical-align: middle;
}
#header_logo {
    width:;
    float: left;
    margin: 11px 20px 20px 20px;
    background-color:;
}
#menubuttons {
    margin-right: 0;
    margin-top: 0;
    height: 2.5em;
    line-height: 2.5em;
    display: inline-block;
    background-color: red;
}
#menubuttons ul {
    list-style-type: none;
    margin:0;
    padding:0;
}
#menubuttons li {
    float: left;
    margin-right: 20px;
}
a {
    font-family:'Share', cursive;
}
a:link {
    text-decoration:none;
}
a:visited {
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:active {
    text-decoration:underline;
}
#theme {
    width: 100%;
    height: 400px;
    background-color: green;
    margin-top: 0;
    float: left;
}
.contentLine {
    margin: 0 auto;
    margin-top: 20px;
    width: 96%;
}
.contentLine .column {
    float: left;
    margin: 0;
    width: 30%;
    margin-right: 1%;
    padding: 1%;
    position: inherit;
    /* shadow for seeing div boundaries */
    box-shadow: 0 0 1px black inset;
}
.contentLine #last {
    margin-right: 0;
}
4

2 回答 2

5

让我一个接一个

1）你<div id="header">包含浮动元素，你需要清除它，所以overflow: hidden;在父元素上使用，即#header

2）同样，你已经漂浮了，#theme但你已经将它设置为width: 100%;所以你不需要在那里漂浮。

3）关于你需要margins相应设置的最后一个，现在1%你需要正确计算这个，我建议你为每个元素使用box-sizing: border-box;和设置，而不是应用33% widthpadding-right

演示

还要确保清除嵌套在内部的浮动元素contentLine。

如果你不是那些 IE 粉丝，那么你可以使用下面的代码片段，它会以更好的方式自我清除父元素。

.clear:after { /* Much much better than overflow: hidden; */
   content: "";
   display: table;
   clear: both;
}
于 2013-09-25T10:02:52.477 回答
2

更新你的 html

</ul>
<!--Menu ends here -->
    </div>
<!--menubuttons ends here -->

<!--Add following div to your code -->
    <div class="clear"></div>
</div>
<div id="theme">

更新你的 CSS

.clear{
clear:both;
}

这应该会有所帮助。- 也可以重复使用。

于 2013-09-25T10:33:29.153 回答