css - 相同高度的相同高度列(多个)

Question

我正在尝试创建具有基础的 HTML 布局。我的代码如下:

<div class="row" data-equalizer>

      <div class="medium-3 columns" data-equalizer-watch>
      <div class="callout" data-equalizer-watch>
<h2>Locations</h2>
</div>
</div>
 <div class="medium-9 columns" data-equalizer-watch>
 <div class="callout" data-equalizer-watch>

     <div class="row  relationship-model">
     <div class="medium-12 columns" >
     <div class="callout">
     <h2>Categories</h2>
      </div>
     </div>
          </div>
 <div class="row  relationship-model">
      <div class="medium-12 columns">
       <div class="callout">
     <h2>Location Current Request</h2>
     </div>
      </div>
            </div>


 </div>
 </div>
</div>

以上HTML输出如下:

虽然我想要它如下:

我希望左侧或右侧的列具有相同的高度。我可以用 table 来做，但需要相同的高度和响应能力。

Answer 1

你可以用 Flexbox 来做到这一点

.content {
  display: flex;
  color: red;
}
.left,
.box {
  border: 1px solid #C3C3C3;
  padding: 20px;
  margin: 5px;
}
.right {
  display: flex;
  flex-direction: column;
  flex: 4;
}
.left {
  flex: 1;
}

<div class="content">
  <div class="left">Lorem</div>
  <div class="right">
    <div class="box">Lorem</div>
    <div class="box">Lorem</div>
  </div>
</div>