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

使用这个CSS你可以实现它：

#div1 {
    float: left;
    background: red;
    height: 80px;
    width: 40%;
    margin-bottom: 20px;
}

#div2 {
    float: right;
    background: red;
    height: 80px;
    width: 40%;
}

#div3 {
   width: 100%;
   height: 20px;
   background: red;
}

#header hr {
   clear: both;
   ...
}

演示： JsFiddle

Answer 2

Fiddle.

#header {
    background: black;
    width: 100%;
}
#header-wrap {
    text-align: center;
    margin: 0 auto;
    width: 80%;
    padding: 30px 0;
}
#div1, #div2 {
    float: left;
    width: 48%;
    height: 80px;
    margin-bottom: 20px;
}
#div1 {
    background: red;
    margin-right: 4%;
}
#div2 {
    background: blue;
}
#header hr {
    border: 0;
    height: 1px;
    background-color: grey;
    clear: both;
}
#div3 {
    background: green;
    height: 80px;
}

Answer 3

与上述几乎相同的答案，只是从我所知道的东西中浮出来并不适用于所有（较旧的）浏览器。

小提琴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>

Answer 4

使前两个div向左浮动并固定其宽度 然后在<hr>

清除

#div1 {
    background-color:#aa6666;
    float:left;
    height: 80px;
    width:150px;
    margin-bottom: 20px;
}
#div2 {
    background-color:#aaaa66;
    float:left;
    height: 80px;
    width:150px;
    margin-bottom: 20px;
}
#header hr {
    border: 0;
    clear: both;
    /*...*/
}