高度相同的相同高度列（多个）

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的输出如下：

虽然我想要如下：

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

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>

Answer 2

试试这个。

<div class="row" data-equalizer="foo">

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

  <div class="medium-9 columns">
    <div class="panel" data-equalizer-watch="foo">
      <div class="row" data-equalizer="bar">
        <div class="callout panel" data-equalizer-watch="bar">
          <h2>Categories</h2>
        </div>
        <div class="callout panel" data-equalizer-watch="bar" style="margin-bottom:0">
          <h2>Location Current Request</h2>
        </div>
      </div>
    </div>
  </div>

</div>

Answer 3

display: flex是最佳选择之一。请注意浏览器兼容性，尤其是有关Android flex的支持，仅支持 Andriod Browser 4.3

参考http://caniuse.com/#search=flex

.content {
  display: flex;
  color: red;
}
.left {
  width: 100px;
}
.box {
  border: 1px solid tomato;
  padding: 20px;
  margin: 5px;
}
.right {
  display: flex;
  flex-direction: column;
  flex: 1;
}

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

更新答案

.content {
  display: flex;
  color: red;
}
.left {
  width: 100px;
  align-self: baseline;
}
.box {
  border: 1px solid tomato;
  padding: 20px;
  margin: 5px;
}
.right {
  display: flex;
  flex-direction: column;
  flex: 1;
}

<div class="content">
  <div class="left box">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="right">
    <div class="box">Lorem</div>
    <div class="box">Lorem</div>
  </div>
</div>

更新演示：http://plnkr.co/edit/dXSG8m6NrJGCYjJDf9ne?p=preview