Html 3个div定位，两个相邻，一个在下方

我发现了一个小问题。我需要创建两个相邻的div，在它们下面创建一个div。我画了一幅图，以便更好地解释它。在CSS中，主DIV是#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>

---

我不知道如何添加到#div2和#div3中，因此它的样式符合我的要求。感谢您的帮助。

使用此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;
   ...
}

---

演示：

使用此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;
   ...
}

演示：

---

与上面的答案几乎相同，只是根据我所知道的浮动在所有（旧）浏览器中都不起作用

小提琴

#标题{
背景图像：url（“../img/header.jpg”）；
背景位置：中心；
背景重复：重复-y；
高度：180像素；
宽度：100%；
背景颜色：黄色；
位置：相对位置；
}
#收割台包装{
文本对齐：居中；
保证金：0自动；
高度：140像素；
宽度：80%；
填充顶部：30px；
背景颜色：绿色；
}
#第一组{
背景图片：url（“../img/logo.png”）；
背景重复：无重复；
高度：80px；
宽度：50%；
边缘底部：20px；
浮动：左；
背景颜色：黄色；
}
#第二组{
宽度：50%；
高度：80px；
浮动：左；
背景颜色：橙色；
}
#收割台人力资源{
边界：0；
高度：1px；
背景：透明；
背景图像：-webkit线性渐变（左，rgba（255，255，255，0），rgb（255，255，255），rgba（255，255，255，0））；
背景图像：-moz线性渐变（左，rgba（255，255，255，0），rgb（255，255，255），rgba（255，255，255，0））；
背景图像：-ms线性渐变（左，rgba（255，255，255，0），rgb（255，255，255），rgba（255，255，255，0））；
背景图像：-o-线性梯度（左，rgba（255，255，255，0），rgb（255，255，255），rgba（255，255，255，0））；
}
#第三组{
}
第一组
第二组

第三组

与上面的答案几乎相同，只是根据我所知道的情况，在所有（较旧的）浏览器中都不起作用

小提琴

#标题{
背景图像：url（“../img/header.jpg”）；
背景位置：中心；
背景重复：重复-y；
高度：180像素；
宽度：100%；
背景颜色：黄色；
位置：相对位置；
}
#收割台包装{
文本对齐：居中；
保证金：0自动；
高度：140像素；
宽度：80%；
填充顶部：30px；
背景颜色：绿色；
}
#第一组{
背景图片：url（“../img/logo.png”）；
背景重复：无重复；
高度：80px；
宽度：50%；
边缘底部：20px；
浮动：左；
背景颜色：黄色；
}
#第二组{
宽度：50%；
高度：80px；
浮动：左；
背景颜色：橙色；
}
#收割台人力资源{
边界：0；
高度：1px；
背景：透明；
背景图像：-webkit线性渐变（左，rgba（255，255，255，0），rgb（255，255，255），rgba（255，255，255，0））；
背景图像：-moz线性渐变（左，rgba（255，255，255，0），rgb（255，255，255），rgba（255，255，255，0））；
背景图像：-ms线性渐变（左，rgba（255，255，255，0），rgb（255，255，255），rgba（255，255，255，0））；
背景图像：-o-线性梯度（左，rgba（255，255，255，0），rgb（255，255，255），rgba（255，255，255，0））；
}
#第三组{
}
第一组
第二组

第三组

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

#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;
    /*...*/
}

---

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

#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;
    /*...*/
}

#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;
    /*...*/
}