2列布局

Question

我想要一个像这样的2列布局：

如您所见，每个“行”的高度与另一个相同。我正在尝试编码，但没有运气。我尝试过bootstrap，但它没有响应（第二列显然没有低于第一列）。

我希望它表现得像这样：

然后我尝试通过javascript设置每个部分的高度，这是有效的，但即使在调整到移动设备的宽度后高度保持不变，我真的很讨厌这种方法。

有没有正常/简单的方法来做到这一点？

Answer 1

您可以使用display:flex。

为了使屏幕调整大小时列彼此相互影响，请使用媒体查询

请参阅下面的示例代码段或This JSFIDDLE，了解响应能力的工作原理

＆＃13;

＆＃13;

.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;}
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;