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();
});

Answer 2

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

在您的代码中，您有6个div元素，每个元素的大小为"col m4 s6"。将所有这些divs加在一起等于24个中间列或36个小列。这24个中间列/ 36个小列放在一个row内，只能使用最大 12 列的布局。

为了缓解这种情况，请在自己的row中包装每组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来证明这一点。您会看到列高也已修复。

Answer 3

使用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;
    }
}

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类），则需要media query才能将.row-flex设置为{{1} }，当屏幕较小时。

希望这会有所帮助。

MaterialiseCSS如何使行列高度相同？

4 个答案: