Question

我在CSS中进行布局时遇到了一些问题。以下是我所说的代码：Fiddle。

<div id="header">应该具有我标记为红色的<div id="menubuttons">的高度。我一直以为如果你没有说出一个div的高度，它就会得到它的孩子的高度。
尽管我定义了<div class="contentLine>，<div id="theme">仍然贴在margin-top: 20px;上。
右列的余量始终大于左列。我希望两者都有相同的浏览器窗口边距。

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;
}

Answer 1

让我一个接一个地

1）您的<div id="header">包含浮动元素，您需要清除它，因此请在父元素overflow: hidden;上使用#header

2）同样，你已经浮动#theme，但你已将其设置为width: 100%;，因此你不需要漂浮在那里。

3）关于最后你需要相应地设置margins，现在它是1%因此你需要正确计算，我建议你使用box-sizing: border-box;和为每个元素设置33% width，然后应用padding-right

Demo

另外，请确保清除嵌套在contentLine内的浮动元素。

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

.clear:after { /* Much much better than overflow: hidden; */
   content: "";
   display: table;
   clear: both;
}

Answer 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;
}

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

CSS的布局问题

2 个答案: