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

Answer 2

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

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

hope it helped

Answer 3

我有这样的问题。原来，我在页面上的另一个元素上留了一个边距，但是没有显示，所以我忘记了。在隔离测试卡之后，我最终找到了页边距并将其删除，然后恢复正常。

Answer 4

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

screenshot of code

实现与卡的对齐问题

4 个答案: