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

Posted 2023-02-19

【中文标题】Zurb Foundation 网格给了我高度，回流问题

【英文标题】：Zurb Foundation grid gives me height, reflow issues

【发布时间】：2013-06-10 19:04:40

【问题描述】：

Foundation 中的一个核心组件对我来说失败了。似乎是基础网格的缺陷。

这张图片说明了一切 - 'smalll'：

这也是一个 Fiddle，确保将窗口大小调整为“小”，

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

(http://jsfiddle.net/ePJzw/)

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

但“小”显示器存在小提琴和屏幕截图中看到的问题。因为这里 a 内仍然会有 4 列，但会分成两行。

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

那么有没有人可以解决这个问题？ 这似乎是一个巨大的缺陷。我几乎可以肯定必须有一个聪明的解决办法？

最简单、最方便的解决方案是跳过 small-6，只堆叠所有产品。但这不是最好的解决方案……

【参考方案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   src="http://u3065104.fsdata.se/wplove/wp-content/uploads/Bodybutter-Cocos.jpg" class="attachment-shop_catalog wp-post-image" ></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   src="http://u3065104.fsdata.se/wplove/wp-content/uploads/Lavera-Solskydd.jpg" class="attachment-shop_catalog wp-post-image" ></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   src="http://u3065104.fsdata.se/wplove/wp-content/uploads/CottonButton-nattlinne-cherry-336x506.jpg" class="attachment-shop_catalog wp-post-image" ></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   src="http://u3065104.fsdata.se/wplove/wp-content/uploads/Ekologiska-kakaomandlar-400x400.jpg" class="attachment-shop_catalog wp-post-image" ></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 -->

【讨论】：

这行得通，但列会自动强制连续具有相同的高度，对吧？有没有办法让列之间有不同的高度？

@emrah 我不明白你想要什么。你想要一个例子吗？你看过这里吗？ foundation.zurb.com/docs/components/block_grid.html

不写所有员工就可以看到示例。