在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>