实现卡的对齐问题

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

我很确定这里一切都很好。这是与您的相同代码的屏幕截图。

screenshot of code

Answer 2

这是因为你的卡片高度不同，导致部分卡片出现错"row"。它只出现在某些宽度的原因是因为内容重排，导致父元素在高度上扩展。

有几种方法可以解决这个问题。您可以使用 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

Answer 3

如果其他人需要帮助，我也发现了这个：

http://codepen.io/TrueNorth/pen/MwVoYp

hope it helped

Answer 4

我遇到过这样的问题。原来我在页面上的另一个元素上放置了边距，但它没有显示出来，我忘记了。隔离测试卡后，终于找到margin删掉就恢复正常了。

实现卡的对齐问题

Materialize alignment issue with cards

html

css

materialize