删除边距响应缩略图网格

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并使用box-sizing: border-box;上的.thumb。这意味着在放入百分比宽度时会考虑填充和边框。

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