將兩個div對齊，並在它們下方放置第三個div

Question

如何將兩個div並排放置，並將第三個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>