Question

在这里小提琴：http://jsfiddle.net/w8sDS/

我正在使用Zurb Foundation 5.我正在尝试创建一个布局，在小型（移动）设备上，将显示为2x2网格。
（在大屏幕上，这将全部在一行中，但每个元素的列数不同，但我现在并不担心这一部分。请记住这一点，并理解这一点。为什么它们都在HTML中的同一行。）

这是我的HTML：

<div class="row collapse">
    <div class="small-6 columns">
        <img src="http://placehold.it/350x400/ccc/000&text=350x400" alt="" />
    </div>
    <div class="small-6 columns">
        <img src="http://placehold.it/350/000/ccc&text=350x350" alt="" />
    </div>
    <div class="small-6 columns">
        <img src="http://placehold.it/350/ccc/000&text=350x350" alt="" />
    </div>
    <div class="small-6 columns">
        <img src="http://placehold.it/350/000/ccc&text=350x350" alt="" />
    </div>
</div>

当我以小屏幕宽度观看时，我看到第一张图像左对齐，其余三张图像全部对齐。为什么这最终不是2x2网格？我怎么能解决这个问题呢？

Answer 1

好吧，我想我得到了它，主要基于dwreck08的回答。但我添加了正确的行＆gt;列嵌套结构并将崩溃类放回原位，因此它可以工作。

<div class="row collapse">
    <div class="small-12 medium-8 columns">
        <div class="row collapse">
            <div class="small-6 columns">
                <img src="http://placehold.it/350x400/ccc/000&text=350x400" alt="" />
            </div>
            <div class="small-6 columns">
                <img src="http://placehold.it/350/000/ccc&text=350x350" alt="" />
            </div>
        </div>
    </div>
    <div class="small-12 medium-4 columns">
        <div class="row collapse">
            <div class="small-6 columns">
                <img src="http://placehold.it/350/ccc/000&text=350x350" alt="" />
            </div>
            <div class="small-6 columns">
                <img src="http://placehold.it/350/000/ccc&text=350x350" alt="" />
            </div>
        </div>
    </div>
</div>

小提琴：http://jsfiddle.net/w8sDS/2/

Zurb Foundation 5：专栏似乎没有正确清理

1 个答案: