我有一个关于 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>
最佳答案
我实际上找到了一个简单的解决方案,但它需要一个插件和 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();
});
关于responsive-design - MaterializeCSS 如何使行列高度相同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37760307/