html - 保持未知数量的 div 居中，每行最多 4 个

Question

我有一个简单的问题，但我无法自己解决。

简而言之:我必须在页面中放置未知数量 的元素，最多。每行 4 个元素，但仍居中。这张图片给了你一个提示(我设置它是为了举例):

详细:在上图中，我介绍了不同的场景。因此，例如，如果总共有 5 个元素，则应使用第一行和最后一行(4 + 1 个圆圈)。如果有 10 个元素，那么第一行乘以两次，第三行乘以一次(4 + 4 + 2 个圆圈)......你明白了。元素(图像和名称在现实生活中是不同的)以特定顺序从数据库表中检索。

从数学的 Angular 来看，我认为有一个模式，因此可以从php中的一个函数来解决。因为我在前端使用 Zurb Foundation 5，这是我的新手，所以有人可能期望有一个简单的解决方案，使用......也许是 block 网格？!这是第一行(4 个圆圈)的代码:

<div class="row" id="circle4">
    <div class="small-3 large-2 large-offset-2 columns text-center">
        <div class="grow pic"><img src="http://lorempixel.com/400/400" /></div><h2 class="round_h2">electrocasnice</h2>
    </div>
    <div class="small-3 large-2 columns text-center">
        <div class="grow pic"><img src="http://lorempixel.com/400/400" /></div><h2 class="round_h2">cosmetice</h2>
    </div>
    <div class="small-3 large-2 columns text-center">
        <div class="grow pic"><img src="http://lorempixel.com/400/400" /></div><h2 class="round_h2">mobilier</h2>
    </div>
    <div class="small-3 large-2 columns text-center">
        <div class="grow pic"><img src="http://lorempixel.com/400/400" /></div><h2 class="round_h2">parfumuri</h2>
    </div>
    <div class="small-3 large-2 columns text-center"></div>
</div>

其他情况(每行3/2/1圈)基本相同，稍微改变偏移量。我也可以 float 元素，为父级提供固定宽度，但这是不可能的，因为它是响应式设计。

无论如何，我如何从 PHP 或 Foundation 中实现这一点？

提前致谢。

更新:这是示例的 fiddle ，以便您更好地理解

jsfiddle

Answer 1

为您的 .row div 提供宽度和文本对齐

.row{
    display:block;
    max-width:1000px;
    text-align:center;
    margin:0 auto;
}

然后让你的圈子内联 block 元素

.small-3{
    display:inline-block;
    width:200px;
    margin:0 25px 25px;
}

.row div 的宽度应等于 4 圈的结果宽度。在上面的例子中它是 1000，因为 (200 + 25 + 25)*4 = 1000。在这里使用你的宽度。