html - 删除边距响应缩略图网格

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