0

我是 JS 新手，我正在尝试找到一种解决方案来在 Zurb Foundation 4 框架上创建响应式自定义网格布局。

自定义布局

较大的块会有一个固定的大小，较小的块会在它周围填充，但是在这种类型的模式中，随着更多 div 的添加。

但是在移动布局中，它们都将变成相同的大小和堆栈。

我一直在搞乱 mason.js 和 jQuery masonry，但我没有任何运气。这些中的任何一个都可以解决我的问题还是我应该研究其他什么？

4

2 回答 2

1

您可以只使用嵌套行并使用其他网格类（如“small -”、“large- ”、push、pull 等）进行这样的布局

我知道你提到了一个 JavaScript 解决方案，但我想我会提供一个粗略的 Html/CSS 选项。

<div class="row">
    <div class="large-2 columns">
        <div class="row">
            <div class="large-12 columns"></div>
        </div>
        <div class="row">
            <div class="large-12 columns"></div>
        </div>
    </div>
    <div class="large-5 columns"></div>
    <div class="large-5 columns"></div>
</div>

<div class="row">
    <div class="large-4 columns"></div>
    <div class="large-8 columns">
        <div class="row">
            <div class="large-4 columns"></div>
            <div class="large-4 columns"></div>
            <div class="large-4 columns"></div>
        </div>
        <div class="row">
            <div class="large-4 columns"></div>
            <div class="large-4 columns"></div>
            <div class="large-4 columns"></div>
        </div>
    </div>
</div>

这是一个非常粗糙的jsFiddle示例

显然，一些使用列数和可能自定义边距的操作是有序的。我确实删除了媒体查询，因为结果窗口在欺骗我。

希望这对任何一种方式都有帮助。

于 2013-08-18T01:46:19.513 回答
0

我写了一个插件来做这个。查看www.masonjs.com，它应该完全符合您的要求！干杯!

于 2013-08-15T21:06:42.890 回答