0

我一直在使用 Zurb Foundation 来评估它是否适合我的下一个项目。在调整浏览器的宽度时，我偶然发现了一个我不喜欢的特性，所以我想确认是否有任何方法可以做到这一点。

假设我有一个网格，每行有四个图像（“列”）。当我缩小浏览器窗口的宽度时，我的自然期望是图像的数量会缩小到前三个，然后是两个，最后是每行一个图像，因为宽度减小了。

但是Foundation似乎做的是尽可能地缩小div以保持每行四列，并且由于空间不足而无法容纳四列，因此它直接跳到每行一张图像。

这种行为对我来说是不合逻辑的，所以我认为必须有办法做到这一点，但是通过http://foundation.zurb.com/docs/grid.php我也找不到办法做到这一点使用 div 或块网格。

我有点假设这将是响应式网格的 101 个功能，但我对这些 css 框架没有太多经验。那么我是否必须开始编写自己的媒体查询来实现每行列数的逐渐减少？

谢谢！

4

2 回答 2

2

我也遇到了同样的问题，这就是我找到这个条目的方式。我知道这已经得到解答并解决了，但我只想分享我的答案。块网格对我有用。http://foundation.zurb.com/docs/components/block_grid.html 查看高级部分

在我的 HTML 中，我只是添加了类来指定在不同屏幕尺寸上每行需要多少个项目，如下所示：

<ul class="row portfolio small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li>
        <img src="images/sample1.jpg" width="640" height="480">
    </li>
    <li>
      ...
    </li>
</ul>

在这里，我希望每行在小型设备中显示 1 个项目，在中型设备中显示 2 个项目，在大型设备中显示 3 个项目。我在 _app.scss 中启用了“基础/组件/块网格”。它奏效了！:)

于 2014-01-29T20:09:21.150 回答
0

Foundation 不会强制内容响应或流动，但网格本身就是。它会向下流动到 12 列网格塌陷到移动网格的某个点。（假设默认网格设置）

但是，您可以通过简单地使所有图像在列内浮动来获得您正在寻找的行为。

像：

img {float:left; width:24%;}

然后尝试添加最小和最大宽度以满足您的需求。

img {float:left; width:24%; min-width:100px; max-width:300px;}
于 2013-01-04T14:50:40.323 回答