html - 3个div定位，两个相邻，一个在它们下面

Question

我发现了一个小问题。我需要创建两个并排的 div 和一个在它们下面的 div。我画了一张图，以便更好地解释它。那个主要的 DIV 是 CSS 中的#header。

这是html代码:

<div id="header">
  <div id="header-wrap">
    <div id="div1"></div>
    <div id="div2"></div>
    <hr> <!-- This is that line under #div1 and #div2 -->
    <div id="div3"></div>
  </div>
</div>

这是我的 CSS 代码:

#header {
    background-image: url("../img/header.jpg");
    background-position: center center;
    background-repeat: repeat-y;
    height: 180px;
    width: 100%;
}
#header-wrap {
    text-align: center;
    margin: 0 auto;
    height: 140px;
    width: 80%;
    padding-top: 30px;
}
#div1 {
    background-image: url("../img/logo.png");
    background-repeat: no-repeat;
    height: 80px;
    margin-bottom: 20px;
}
#div2 {

}
#header hr {
    border: 0;
    height: 1px;
    background: transparent;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:    -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:     -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:      -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
}
#div3 {

}

我不知道要在 #div2 和 #div3 中添加什么，所以它的样式是我想要的。感谢您的帮助。

Answer 1

与上述几乎相同的答案，只是从我所知道的内容中 float 在所有(较旧的)浏览器中都不起作用。

fiddle http://jsfiddle.net/rbHah/

<style type="text/css">

#header {
    background-image: url("../img/header.jpg");
    background-position: center center;
    background-repeat: repeat-y;
    height: 180px;
    width: 100%;

    background-color:yellow;

    position:relative;
}
#header-wrap {
    text-align: center;
    margin: 0 auto;
    height: 140px;
    width: 80%;
    padding-top: 30px;

    background-color:green;
}
#div1 {
    background-image: url("../img/logo.png");
    background-repeat: no-repeat;
    height: 80px;
    width:50%;
    margin-bottom: 20px;

    float:left;

    background-color:yellow;
}
#div2 {
    width:50%;
    height:80px;
    float:left;

    background-color:orange;


}
#header hr {
    border: 0;
    height: 1px;
    background: transparent;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:    -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:     -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:      -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
}
#div3 {

}
</style>


<div id="header">
  <div id="header-wrap">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div style="clear:both;"></div> <!--this div is verry important after floating divs! -->
    <hr> <!-- This is that line under #div1 and #div2 -->
    <div id="div3">div3</div>
  </div>
</div>