html - 实现卡的对齐问题

Question

嘿，大家好，我正在使用 Materialize 框架，并且添加了一些像这样的普通图像卡。

  <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