Question

我也必须只使用CSS。对于这个特定的布局，我有这样的列：

<div class="col-md-12 no-border no-padding">
  <h2 class="heading upper align-center">Headline</h2>
  <p class="subheading lower align-center">Make the first thing your buyers see amazing</p>
  <div class="help-link align-center upper margin-b-5">
    <p class="mini-help">Need help? Watch this&nbsp;&nbsp;
    <div class="help">
      <div class="hvr-grow"><i class="icon-camrecorder"></i></div>
    </div>
    <p class="mini-help upper align-center margin b-5">&nbsp;&nbsp;quick video.</p>
  </div>
</div>

Answer 1

我可以看到你已经实现了.row-eq-height来设置所有列的高度相等，但你错过了每列中有另一个.col-md-12，它取了内容的宽度它，所以只需将其设置为height:100%，以便取代父级的高度！

Codepen Demo

CSS更改：

.headlines .row-eq-height > div > .col-md-12{
  height:100%;
}

Answer 2

已经回答，但我仍然接受我的回答。

我没有触及HTML或CSS，但我添加了一些选择器和弹性规则，以使每一个盒子在同一高度的行上。 https://codepen.io/gc-nomade/pen/wrJWMq

/ * CSS UPDATE * /

div.row,
.row > div {
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 auto;
}
.row > div {
  flex-flow: column;
  flex: 1 0 auto;
  margin-bottom: 0;
}
.row > div > div {
  flex: 1 1 50%;
}

.multi-summ.align-center.bcolor-white {
  margin-bottom: 2rem;
}

尽管里面有内容，我怎样才能使列高度相等？

2 个答案: