数据均衡器输出"height: inherit“

Question

我一直在尝试使用数据均衡器来使一些盒子的高度相等，但到目前为止，它只应用了一个height: inherit类，而不是所需的像素高度。这是我试图均衡的代码：

​

<div class="row" data-equalizer>
  @foreach($category_items as $row)
  <div class="large-3 medium-4 small-12 columns" data-equalizer-watch>
    <div class="small-12 columns">
      <h5>{{{ $row['name'] }}}</h5>
      <p>{{ strip_tags($row['description']) }}</p>
    </div>
    <div class="row padding_left_small" align="left">
      <button>View Range</button>
    </div>
  </div>
  @endforeach
</div>

​

foreach循环大约12次，"name“和"description”中的数据长度不同。任何帮助都将不胜感激谢谢斯蒂芬

Answer 1

我建议你看看CSS flexboxes。如果你给容器这样的样式：

.row-container { 
  display: flex; 
  align-items: stretch; 
}

避免使用.row，因为基础添加了.row:before { content: " ";}，这会扰乱flexbox。您不需要.row :)

所有的项目都将延伸到与最高的项目相匹配。使用flexbox很容易。:)

一些有用的资源：

Guide to flexbox

Play with flexboxes live