html - 2 列 CSS 布局

Question

我有以下内容:

<div id="aboutus">
<div id="header"></div>
<div id="headerbar"><p>ABOUT US</p></div>
<div id="contentarea">
<p>CONTENT ABOUT US</div>
<div id="clear"></div></div>

<div id="contact">
<div id="header"></div>
<div id="headerbar"><p>CONTACT US</p></div></div>
<div id="contentarea">CONTENT CONTACT US</div>
<div id="clear"></div>
</div>

和:

#aboutus {
    float:left;
    width:100%;
    height:100%;
}
#contact{
    float:left;
    width:100%;
    height:100%;
}
#headerbar {
    float:left;
    width:25%;
    height:100px;
    text-align:right;
    padding-right:5px;
}
#contentarea{
    float:left;
    width:70%;
    height:100px;
}
#clear{
    clear: both;
}
#header{
    background:url(bg.png) no-repeat center center;
    background-size:contain;
    width:100%;
    height:200px;
}

我对此完全陌生，所以我确定我在做一些愚蠢的事情。基本上它的两个 2 列布局相互叠加，aboutus div 很好，但是联系人 div 显示在 about us div 中。对我做错了什么有什么建议吗？

Answer 1

如果你想在另一个上面指定两个 div，可以用 width:100%; 指定 display:block;，如下所示

.div{
    display: block;
    width: 100%;
}

您不必使用 float 。当然，您可以通过多种方式实现，这是其中一种方式。你可以在这里玩这个http://jsfiddle.net/qiqiabaziz/mrrQU/