MaterializeCSS 如何使行列高度相同？

Question

我在 materializeCSS 上有一个基本网格，我的问题是我的列高度不一样，所以我的布局变得一团糟。我知道有人在 bootstrap 上问过这个问题，但是 none 的解决方案在 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();
});

Answer 2

这可以通过正确使用 grid system 轻松解决。

在您的代码中，您有 6 个 div 个元素，每个元素的大小为 "col m4 s6"。将所有这些 divs 加在一起等于 24 个中型列或 36 个小型列。这 24 个中 columns/36 小列放置在单个 row 中，它仅适用于 max 布局 12 列.

为了缓解这种情况，将每组等于 12 列宽度的元素包裹在它们自己的 row:

中

<div class="row">
    <div class="col m4">
        <p>Content</p>
    </div>
    <div class="col m4">
        <p>More Content</p>
    </div> 
    <div class="col m4">
        <p>Even More Content</p>
    </div>
    <!-- No more room for content as three m4-sized columns equal 12. 
         Any additional content should be placed within a new row-->
</div>
<div class="row>
    <!--Additional content up to 12 column widths go in here-->
</div>
...

I updated your initial fiddle 来证明这一点。您会看到列高也已固定。

Answer 3

使用SASS，我在第一个col上使用clear:left。

s4 m3 l2 的示例：

@media #{$small-and-down}{
    .col:nth-child(3n+1) {
        clear: left;
    }
}
@media #{$medium-only}{
    .col:nth-child(4n+1) {
        clear: left;
    }
}
@media #{$large-and-up} {
    .col:nth-child(6n+1) {
        clear: left;
    }
}

Answer 4

这是一个使用纯 CSS -

的简单技巧

.row-flex {
  display: flex !important;
}
.row-flex .col {
  min-height: 100% !important;
}

将此规则应用于您的行元素：

<div class="row row-flex">
  <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>

现在，所有列都是行高的 100%，并且行高等于其中最长列的高度。

注意：如果您要在小屏幕上使用单列布局（例如使用 s12 class），您需要 media query 来设置 .row-flex 到 display: block 当屏幕较小时。

希望对您有所帮助。

MaterializeCSS 如何使行列高度相同？

MaterializeCSS how can i make row column height the same?

grid

materialize

responsive-design

responsiveness

responsive