Question

我试图设计一个兼容不同显示尺寸的页面，我有6个要素可供使用，我希望每行显示3个大型到横向设备，每行2个，每行1个小型设备。我用以下结构完成了这个：

<div class="row" data-equalizer>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>    
</div>

到目前为止这么好，至少在逻辑上，问题是当你在某个元素上有一个非常小的文本时，让我们说你在第3个元素上有一个非常短的文本和50-100其他元素上的字符。在大+屏幕上这种情况下发生的是第4和第6个元素被放置在第3个以下，数据均衡器停止工作。第5个元素低于第1个元素，第2个元素下方有一个空格。

正如您所看到的，我只使用了一行，因此内容可以根据屏幕大小重新排列，但这对我不起作用，我做错了什么？

Answer 1

在ZURB论坛上找到答案，这是我被告知要做的事情：

<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>    
</ul>

链接到答案：http://foundation.zurb.com/forum/posts/35716

链接到文档：http://foundation.zurb.com/docs/components/block_grid.html

数据均衡器不在无行列上工作

1 个答案: