对齐彼此相邻的两个div和它们下面的第三个div。

Question

我怎么把两个div放在一起，第三个放在他们下面？如下所示：

​

​

我的当前代码如下所示：

HTML：

<div id="container">
    <div class="div-1">div1</div>
    <div class="div-2">div2</div>
    <div class="div-3">div3</div>
</div>

CSS：

#container {
     position: absolute;
}

.div-1 {
     float: left;
     width: 45%;
     padding: 2%;
}

.div-2 {
     clear: both;
}

.div-3 {
     float: right;
     width: 45%;
     padding: 2%;
}

Answer 1

您可以使用Flexbox

​

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#container div {
  padding: 20px;
  border: 1px solid black;
  margin: 10px; 
}

.div-1, .div-3 {
  flex: 1 1 0;
}

.div-2 {
   flex: 100%;
   order: 3;
}

<div id="container">
    <div class="div-1">Div 1</div>
    <div class="div-2">Div 2</div>
    <div class="div-3">Div 3</div>
</div>

​