具体化CSS如何使行列高度相同?

我实际上找到了一个简单的解决方案,但它需要一个插件和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>

Java脚本

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

正确使用 grid system .

在您的代码中,您有6个 div 元素的大小为 "col m4 s6" 每个添加所有这些 divs 总共相当于24个中柱或36个小柱。这24个中柱/36个小柱放置在一个 row 它只适用于 最大值 的布局 12 柱。

为了缓解这种情况,将每组等于12列宽度的元素包装在它们自己的元素中 一行 :

<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 来证明这一点。您将看到列高度也已固定。

对于SASS,我使用 clear:left 在第一个 col .

示例: 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;
    }
}

下面是一个使用纯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类中),则需要一个 media query 设置 .row-flex 到 display: block 当屏幕很小时。

希望这能有所帮助。