具有媒体查询的弹性布局 - 边距不正确答案

【问题标题】：Elastic layout with media query - margins not correct具有媒体查询的弹性布局 - 边距不正确
【发布时间】：2014-05-09 02:21:15
【问题描述】：

我正在尝试制作一个弹性布局，无论该行显示多少项目，都可以将左右边距与页面的最左侧和最右侧对齐。

这是我的代码：http://jsfiddle.net/U2W72/1/

.thumb {
    float: left;
    width:16%;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 4%;
    background: pink;
    height: 200px;
}
.thumb:nth-child(5n) {
    margin-right: 0px;
    box-shadow:inset 0 0 0 3px red;
}
.thumb:nth-child(5n+1) {
    margin-left: 0px;
    box-shadow:inset 0 0 0 3px blue;
}
@media (max-width: 1200px) {
    .thumb, .thumb:nth-child(1n) {
        width:21%;
        margin-left: 2%;
        margin-right: 2%;
        margin-bottom: 4%;
        box-shadow: 0 0;
    }
    .thumb:nth-child(4n) {
        margin-right:0;
        box-shadow:inset 0 0 0 3px yellow;
    }
    .thumb:nth-child(4n+1) {
        margin-left:0;
        box-shadow:inset 0 0 0 3px blue;
    }
}
@media (max-width: 600px) {
    .thumb, .thumb:nth-child(1n) {
        width:46%;
    }
    .thumb:nth-child(2n) {
        margin-right:0;
        box-shadow:inset 0 0 0 3px gray;
    }
    .thumb:nth-child(2n+1) {
        margin-left:0;
        box-shadow:inset 0 0 0 3px blue;
    }
}
@media (max-width: 400px) {
    .thumb, .thumb:nth-child(1n) {
    width:100%;
    display:block;
    margin:0;
    box-shadow: inset 0 0 5px 1px;
    }
}
#left {
    float: left
}
#right {
    float: right
}

我相信我正确地使用了第 n 个孩子来从最左边和最右边的粉红色框中删除边距，以便它们对齐，但是当我运行它时它看起来不正确。谁能告诉我哪里出错了？

【问题讨论】：

“不正确”是什么意思（请参阅您使用的示例在另一个帖子/问题中提供）
你想要这个jsfiddle.net/U2W72/3？
@MiljanPuzović 你搞定了！唯一的问题是当有五个交叉时它是不正确的（即带有红色框的那个）
啊，我现在在上网本，因为分辨率小没看到红框:)
@MiljanPuzović 我首先提供的示例也是使用大众单位，他显然从stackoverflow.com/questions/22724487/… 放弃了jsfiddle.net/N3VRM/6

标签： html css layout fluid-layout

【解决方案1】：

当您从行上的第一个和最后一个元素中删除边距时，宽度+边距的总和不是 100%。例子：如果您有 5 个宽度为 16% 且左右边距为 2% 的框，则总计为 100%。但是，当您从第一个盒子中删除 2% 的边距和从最后一个盒子中删除 2% 的边距时，总计为 96%。有意义吗？

【讨论】：