html - 实现卡的对齐问题

Question

大家好，我正在使用物化框架，我添加了一些像这样的普通图像卡片。

  <div class="row">
  <div class="col s12 m6 l3">
        <div class="card">
            <div class="card-image">
                <img src="img/websiteicon.png" alt="websites">
                <span class="card-title">title here</span>
            </div>
            <div class="card-content">
                <p>text here</p>
            </div>
            <div class="card-action">
                <a href="diensten.php">check out possibilities</a>
            </div>
        </div>
    </div>
 (4 div cards)
 </div>

这只出现在中等浏览器尺寸和特定宽度的情况下。

有人知道怎么解决吗？很确定这不是错误。

Answer 1

这是因为您的卡片高度不同，导致某些卡片出现在错误的“行”上。它只出现在某些宽度上的原因是因为内容重排，导致父元素在高度上扩展。

有几种方法可以解决这个问题。您可以使用 Materializes card size .这会将卡片设置为静态高度，但如果您需要显示大量内容，我不会推荐它。

<div class="card medium">
 ...    
</div>

解决此问题的另一种方法是添加另一层行，将(例如)2 张卡片分组。如果您在列上使用正确的大小(2 张带有 .m6 的卡片、3 张带有 .m4 的卡片、4 张带有 .m3 的卡片等等)，它不会导致行的内容换行到第二行。

<div class="row">
 <div class="row col s12 m12 l6"> <!--1st row containing 2 cards-->
  <div class="col s12 m6 card">
   ...
  </div>
  <div class="col s12 m6 card">
   ...
  </div>
 </div><!--END ROW-->

 <div class="row col s12 m12 l6">  <!--2nd row containing 2 cards-->
  <div class="col s12 m6 card">
   ...
  </div>
  <div class="col s12 m6 card">
   ...
  </div>
 </div><!--END ROW-->
</div

实例:http://codepen.io/DehraX/pen/LkQBwZ