responsive-design - MaterializeCSS 如何使行列高度相同？

Question

我有一个关于 materializeCSS 的基本网格，我的问题是我的列高度不一样，所以我的布局变得一团糟。我知道这在 bootstrap 上被问过，但在 materializeCSS 中没有一个解决方案对我有用

这是我的 jsfiddle https://jsfiddle.net/zrb46zr2/1/

<div class="row">
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
    Looooong Looooong Looooong Looooong Looooong text
    </p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
      Short text
    </p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>Short text</p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>

  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
</div>

Answer 1

我实际上找到了一个简单的解决方案，但它需要一个插件和 jquery，而且我不确定这样做的缺点。

但是请随时分享您自己的解决方案我真的想用纯 CSS 解决这个问题

反正代码是这样的

阅读并安装此脚本:https://github.com/liabru/jquery-match-height

HTML

<div class="row">
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
    Looooong Looooong Looooong Looooong Looooong text
    </p>
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
      Short text
    </p>
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>Short text</p>
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>

  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
</div>

Javascript

$(document.ready(function(){
   $('.sample').matchHeight();
});