在2列布局

Question

行相同的高度我希望有一個2列布局是這樣的：

正如你所看到的，每個「行」具有相同的高度另一個。我正在嘗試編碼，但沒有運氣。我試過bootstrap，可以工作，但它沒有反應（第二列顯然不低於第一列）。

我希望它這樣的表現：

然後我試圖設置由JavaScript的每個部分，即工作的高度，但高度甚至調整到移動設備的寬度後保持不變我真的很討厭這種方法。

有沒有任何正常/簡單的方法來做到這一點？

Answer 1

您可以使用display:flex。

爲了讓這個列下對方去當屏幕大小，使用媒體查詢的

見示例代碼片段將低於或This JSFIDDLE看到的反應是如何工作的

.flexbox-container { 
 
    display: -ms-flex; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 
.flexbox-container > div { 
 
    width: 50%; 
 
    padding: 10px; 
 
    border: 1px solid green; 
 
    height: 300px; 
 
} 
 
.flexbox-container > div:first-child { 
 
    margin-right: 1px; 
 
} 
 

 
.flexbox-container2 > div { 
 
    height:100px; 
 
} 
 
@media screen and (max-width:767px){ 
 
.flexbox-container{display:block;} 
 
}

<div class="flexbox-container flexbox-container2"> 
 
    <div> 
 
    <h3>Row 1 - Column 1</h3> 
 
    </div> 
 
    <div> 
 
    <h3>Row 1 - Column 2</h3> 
 
    </div> 
 
</div> 
 
<div class="flexbox-container"> 
 
    <div> 
 
    <h3>Row 2 - Column 1</h3> 
 
    </div> 
 
    <div> 
 
    <h3>Row 2 - Column 2</h3> 
 
    </div> 
 
</div> 
 
<div class="flexbox-container flexbox-container2"> 
 
    <div> 
 
    <h3>Row 3 - Column 1</h3> 
 
    </div> 
 
    <div> 
 
    <h3>Row 3 - Column 2</h3> 
 
    </div> 
 
</div>