Zurb Foundation网格给我高度，回流问题

Question

基金会的核心组件之一失败了。似乎是基金会网格中的一个缺陷。

这个img说明了一切 - 'smalll'：

这也是一个小提琴，请确保将窗口调整为“小”，

small-6 large-3 columns is the classes used.

（http://jsfiddle.net/ePJzw/）

台式机上有4列 - 小型显示器上有2列。 同样的问题也发生在桌面上 - 但我为每第四列做了一个。所以桌面列工作得很好。即使不需要这样做也会更好。

但是'小'显示器有问题，可以在小提琴和截图中看到。因为这里仍然有4列，但将分成两行。

这有一个简单的解决方法吗？有人说，Javscript的高度可能相同。但是它必须在调整大小时触发，并且只有在“小”媒体查询是活动的时才会触发。并且仅适用于左侧的产品以匹配右侧产品的高度。而且我不擅长使用javascript。

那么有没有人对此有所解决？ 这似乎是一个巨大的缺陷。我几乎肯定必须有一个聪明的解决方案吗？

最简单，最方便的解决方案是跳过小6并且只堆叠所有产品..但是不是最好的解决方案......

Answer 1

设置块网格的最佳方法是使用block-grid elements.

使用块网格和小屏幕的方式将显示两个元素，在大屏幕上，您将获得四个元素。基金会最好的事情之一。

<ul class="small-block-grid-2 large-block-grid-4">
  <li><img src="../img/demos/demo1.png"></li>
  <li><img src="../img/demos/demo2.png"></li>
  <li><img src="../img/demos/demo3.png"></li>
  <li><img src="../img/demos/demo4.png"></li>
</ul>

您的代码已重写。

<div class="products-list-container">
  <ul class="small-block-grid-2 large-block-grid-4">
    <li>
      <div class="img-wrapper"><img width="150" height="150" src="http://u3065104.fsdata.se/wplove/wp-content/uploads/Bodybutter-Cocos.jpg" class="attachment-shop_catalog wp-post-image" alt="Bodybutter Cocos"></div>
        <h3>#1 When first columns is higher then the one to the right. There is a big bug happening. This is by all means not good at all. This makes me this grid to fail for many cases. Am I missing something obvious?</h3>
        <span class="price"><span class="amount">115kr</span></span>
    </li> <!-- .product end -->

    <!-- .product start -->
    <li>
      <div class="img-wrapper"><img width="110" height="200" src="http://u3065104.fsdata.se/wplove/wp-content/uploads/Lavera-Solskydd.jpg" class="attachment-shop_catalog wp-post-image" alt="Lavera Solskydd"></div>
      <h3>#2 If this would be having higher height than the one to the left - no problem</h3>


      <span class="price"><span class="amount">210kr</span></span>
    </li> <!-- .product end -->

    <!-- .product start -->
    <li>
      <div class="img-wrapper"><img width="336" height="506" src="http://u3065104.fsdata.se/wplove/wp-content/uploads/CottonButton-nattlinne-cherry-336x506.jpg" class="attachment-shop_catalog wp-post-image" alt="Cotton&amp;Button nattlinne cherry"></div>
      <h3>#3&nbsp;Ekologiskt nattlinne cotton &amp; button</h3>

      <span class="price"><span class="amount">375kr</span></span>
    </li> <!-- .product end -->


    <!-- .product start -->
    <li>
      <div class="img-wrapper"><img width="400" height="400" src="http://u3065104.fsdata.se/wplove/wp-content/uploads/Ekologiska-kakaomandlar-400x400.jpg" class="attachment-shop_catalog wp-post-image" alt="Ekologiska kakaomandlar"></div>
      <h3>#4 Ekologiska kakaomandlar</h3>

      <span class="price"><span class="amount">99kr</span></span>
    </li> <!-- .product end -->
  </ul> <!-- .row end -->
</div> <!-- .products-list-container -->