保持不明的div居中，每行最多4个 [英] Keep unknown number of divs centered, max 4 per row

问题描述

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

I have a simple problem, yet I can't figure it out by myself.

总之：有一个未知数字我必须在页面中放置的元素数量，最大值每行4个元素，但仍居中。该图像为您提供了一个提示（为示例起见，已对其进行设置）：

In short: there are an unknown number of elements which I have to position in the page, max. 4 elements per row, yet still centered. This image gives you a hint (I've set it up for the sake of example):

详细信息：在上图中，我介绍了不同的情况。因此，例如，如果总共有5个元素，则应使用第一行和最后一行（4 + 1圈）。如果有10个项目，则第一行两次，第三行一次（4 + 4 + 2圈）...您就知道了。从数据库表中以特定顺序检索元素（现实中的图像和名称是不同的）。

Detailed: On the image above I covered the different scenarios. So for example if there would be 5 elements total, the first and the last row should be used (4 + 1 circles). If there would be 10 items, then two times the first row and once the third (4 + 4 + 2 circles)... You get the idea. The elements (images and names are different in real-life) are retrieved from a database table in a specific order.

从数学的角度来看，存在一种模式我认为，因此可以通过php中的函数解决。由于我正在使用Zurb Foundation 5进行前端开发（我是新手），因此人们可能希望使用...块网格可能是一种简单的解决方案？这是第一行的代码（4个圆圈）：

From a mathematical point of view, there is a pattern I think, thus it could be solved from a function in php. Since I am using Zurb Foundation 5 for the front-end, which I'm new at, one might expect that there is an easy solution using... the block grid maybe?! Here is the code for the first row (4 circles):

<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个圆圈）基本相同，略有不同抵消。我也可以浮动元素，为父元素提供固定的宽度，但这是不可能的，因为它是一种响应式设计。

The other cases (3/2/1 circles per row) are basically the same, slightly changing the offset. I've could also float the elements, giving a fixed width to the parent, but that's not possible, since it's a responsive design.

无论如何，我如何实现这一目标，来自 PHP 还是 Foundation ？

Anyway, how can I achieve this, from either PHP or Foundation?

预先感谢。

更新：这是带有示例的小提琴，因此您可以更好地理解

Update: Here is the fiddle with the example, so you can understand better

jsfiddle

推荐答案

给出宽度&文本对齐到您的 .row div

Give width & text-align to your .row div

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

然后使您的圈子内嵌块元素

Then make your circles inline block elements

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

.row div的宽度应等于结果宽度4 cirlce。在上面的示例中，因为（200 + 25 + 25）* 4 = 1000，所以它是1000。在这里使用您的宽度。

Width of .row div should be equal to resulting width of 4 cirlce. In above example it is 1000 since (200 + 25 + 25)*4 = 1000. Use your width here.

这篇关于保持不明的div居中，每行最多4个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！