MaterializeCSS如何使行列高度相同? [英] MaterializeCSS how can i make row column height the same?

问题描述

我在materializeCSS上有一个基本的网格，我的问题是我的列高度不一样，所以我的布局变得一团糟.我知道这一直是引导程序的问题，但是在materializeCSS中没有一种解决方案对我有用

I have a basic grid on materializeCSS my problem is my column is not the same height so my layout became a mess. I know this has been ask on bootstrap but none of the solution works for me in materializeCSS

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

This is my 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，而且我不确定这样做的弊端.

I actually found a simple solution but it requires a plugin and jquery and also i am not sure on the cons of doing this.

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

But please feel free to share your own solution i really want to fix this with maybe pure CSS

无论如何，代码是这样的

Anyway the code is like this

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

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

Javascript

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

这篇关于MaterializeCSS如何使行列高度相同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！