删除边距响应缩略图网格

Question

我创建了一个具有响应式 4-3-2-1 列结构的缩略图网格：25%、33.33%、50%、100%。但我希望能够删除每个状态下每个缩略图的最后一个边距，因此有 4 列（25%、25%、25%、25%）或 3 列（33.33%、33.33%、33.33%）等。现在最后一个缩略图跳到其他缩略图下方。我试图为此使用 :nth-child 。

用 div、无序列表 (ul) 或其他东西构建缩略图网格的最佳方法是什么？

谁能帮我解决这个问题？谢谢;-)

这里的例子：

Fiddle

或

Codepen

.thumb:nth-child(4n) {
margin-right: 0;}

Answer 1

选项 1

使用box sizing。将您的 margin 更改为 padding 并在您的 .thumb 上使用 box-sizing: border-box;。这意味着在输入百分比宽度时会考虑填充和边框。

JSFIDDLE

选项 2

使用calc。示例：

.thumb {
   width: calc(50% - 20px);
}

JSFIDDLE

我会让您根据浏览器支持来决定哪个更适合您。 :)

更新

要去掉右边的边距，你可以使用nth-child，就像你建议的那样：

@media all and (max-width: 800px) and (min-width: 601px) {
    .thumb {
        width: 50%;
    }
    .thumb:nth-child(2n+0) {
        padding: 0 0 20px 10px;
    }
}

请参阅this page 的底部示例。

JSFIDDLE