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

我正在设计与动态数量的项目一起使用的弹性布局。正如您所看到的，布局是流畅的，并且每行的项目数随分辨率而变化。如果这有助于我使用PHP生成它，我可以在该项目上放置任何我想要的类。弹性布局 - 确保布局总是对齐

代码

问题

我总是想最左边的粉红色网格与最左边的页面和同样的ALIGN右边。目前在粉色方块上总是有额外的1％的余量，这意味着它们不符合“测试”文本。

无效的解决方案

唯一的解决办法我能想出是把1％的保证金上的所有内容是不是粉红色网格，以便它们都对齐（即在测试文本），但在我的制作网站上，这会让它变得非常混乱。使用JavaScript也将是无效的解决方案

可能的解决方法

可能实现这一目标是使用CSS的不同分辨率第n项规则，像下面的方式，但我似乎无法得到它正确地工作：

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

我只是知道这是一个非常聪明，优雅的解决方案，我无法弄清楚。要点是最干净，最兼容的解决方案。

2014-03-28 Jimmy

我明白你正在尝试做什么，但大多数（如果不是所有响应式框架都依赖某种填充内容区域来使所有内容都一致）。你可以通过一些Javascript来确定每个列在网格中的位置。 – Chris

回答正确的答案是？ –

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

IT将发送到最右边和最左边的第一个&每行的最后一个框。但箱子不会在最后一行上有相同的边距，并会打破列的外观。

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）的计算和重置特定保证金到选定的框。

因此，让我们的测试：.thumb:nth-child(4n) {margin-left:0;} .thumb:nth-child(4n+1) {margin-right:0;}

这些计数需要重置并为每个mediaquerie设置。

请参阅上一个小提琴链接，使用mediaquerie进行阴影颜色切换。

2014-03-29 00:52:22

回答