弹性布局 - 确保布局始终对齐答案

【问题标题】：Elastic layout - Ensuring layout always aligns弹性布局 - 确保布局始终对齐
【发布时间】：2014-03-29 08:52:22
【问题描述】：

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

代码

问题

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

解决方案无效

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

可能的解决方案

实现这一点的可能方法是使用 CSS nth 项规则来处理不同的分辨率，如下所示，但我似乎无法使其正常工作：

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

我只知道对此有一个非常聪明、优雅的解决方案，但我想不通。积分用于最干净、最兼容的解决方案。

【问题讨论】：

我知道您正在尝试做什么，但大多数（如果不是所有）响应式框架都依赖某种填充内容区域来使所有内容保持一致。您当然可以使用一些 Javascript 来确定每列在网格上的位置。
答案是否正确？

【解决方案1】：

您可以查看对齐框并使用 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 切换阴影颜色。

【讨论】：