弹性布局-确保布局总是对齐

Question

我正在设计一个弹性布局，它与动态数量的项目一起使用。正如您所看到的，布局是不稳定的，每行的项数随分辨率的变化而变化。如果这有帮助的话，当我用PHP生成类时，我可以在项目上添加我想要的任何类。

码

http://jsfiddle.net/N3VRM/3

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

问题

我总是希望左边最粉红色的网格与页面的最左边对齐，在右边也是一样。目前，粉红色方格上总是有1%的空白，这意味着它们与“测试”文本不对齐。

无效解决方案

我唯一能想到的解决方案是在所有内容上加1%的利润率，这不是粉色网格，所以它们都对齐(即测试文本)，但在我的生产站点上，这会使它变得非常混乱。使用javascript也是无效的解决方案。

可能的解决方案

实现这一目标的方法可能是对以下不同的解决方案使用CSS第n项规则，但我似乎无法使它正常工作：

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

我只知道有一个非常聪明，优雅的解决方案，我无法弄清楚。点数用于最干净、最兼容的解决方案。

Answer 1

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

它将发送到最右和最左第一和每一行的最后一盒。但是，框将不会以相同的边距在最后一行发送，并且会破坏列的外观。

display:inline-block和text-align:justifyhttp://jsfiddle.net/N3VRM/4/

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

但是，看起来很接近您的需要，是使用选择器nth-child(n)来计算和重置选定框的特定页边距。

那么让我们来测试一下：.thumb:nth-child(4n) {margin-left:0;} .thumb:nth-child(4n+1) {margin-right:0;}

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

这些计数需要重置，并为每个中介设置。

看在最后的小提琴链接，阴影的颜色切换与中档。