弹性布局 - 确保布局始终对齐 [英] Elastic layout - Ensuring layout always aligns

问题描述

我设计一个弹性布局，使用动态数量的项目。如您所见，布局是流畅的，每行中的项目数量随分辨率而变化。

I am designing an elastic layout which is used with a dynamic number of items. As you can see, the layout is fluid and the number of items per row changes with the resolution. I can put on any classes I want on the item when I generate them with PHP if this helps.

代码

http://jsfiddle.net/N3VRM/3

http://jsfiddle.net/N3VRM/ 3 / embedded / result /

问题：

希望最左边的粉红色网格与页面的最左侧对齐，右侧相同。

I always want the left-most pink grids to align with the far left of the page and the same on the right side. Currently there is always an extra 1% margin on the pink squares, meaning they do not align with the "testing" text.

无效的解决方案。无效的解决方案

Invalid solution

我能想出的唯一解决方案是对所有不是粉红色网格的内容设置1％的边距，使它们都对齐（即在测试文本），但在我的生产网站，这将使它非常混乱。使用javascript也是无效解决方案

The only solution I can come up with is to put a 1% margin on all content which isn't the pink grid so that they both align (i.e on the testing text), but on my production site, this is going to make it very messy. Using javascript would also be an invalid solution

可能的解决方案

要实现这一点是使用CSS nth 项规则为不同的决议，如下，但我似乎无法使其正常工作：

Possibly the way to achieve this is to use the CSS nth item rule for different resolutions like below but I can't seem to get it working correctly:

@media (max-width: 1200px) {
    .thumb:nth-child(3n+3) {
        width:21%;
    }
}

我只是知道有一个非常聪明，优雅的解决方案对此，我不能想出来。

I just know there is a really smart, elegant solution to this and I can't figure it out. Points go for the cleanest, most compatible solution.

推荐答案

您可以看看如何证明对齐方框，并使用 display：inline-block; 而不是 float 或display：flex。

you could take a look at ways to justify align your boxes and use display:inline-block; instead of float or display:flex.

IT将发送到最右边和最左边第一&每行的最后一个框。但是框将不会在最后一行以相同的边界分派，并且会破坏列外观

IT will send to far right and far left first & last box of each line. but boxes will not be dispatch on last line with same margin and will break the column look.

display：inline -block 和 text-align：justify ： http://jsfiddle.net/N3VRM/4/

display：flex 和 flex：wrap 和 justify-content：space-between ： http://jsfiddle.net/N3VRM/5/

但看起来接近您的需要是使用选择器 nth-child（n ）来计算和重置特定边距到所选框。

But what looks close to your needs is the use of the selector nth-child(n) to count and reset specific margin to selected boxes.

所以让我们来测试一下： .thumb：nth-​​child（4n）{margin-left：0;} .thumb：nth-​​child +1）{margin-right：0;}

So let's test : .thumb:nth-child(4n) {margin-left:0;} .thumb:nth-child(4n+1) {margin-right:0;}

http://jsfiddle.net/N3VRM/6/

这些计数需要针对每个媒体工具重置和设置。

these count needs to be reset and set for each mediaquerie.

这篇关于弹性布局 - 确保布局始终对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！