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

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>

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

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

Same Height columns (multiple) of same height

html

css

zurb-foundation

更新答案