css - 图像之间的内部间距？

Question

我想用缩略图创建一个画廊，但是我遇到了一个问题。如果我想隔开拇指，我应该做类似的事情margin-right: 15px;，但是这会为最右边的图像创造空间。如果不将它们放在模板的边缘，我将如何创建这些空间？

例子：

谢谢！

Answer 1

您需要的是容器元素上的负边距：

http://jsfiddle.net/LYhum/

.container {
    margin: -10px 0 0 -10px;
}

.container .image {
    margin: 10px 0 0 10px;
    /* either floated or set to inline-block */
}

如果您的容器是响应式的（即您不知道它的宽度），那么 flexbox 值得一看：

http://jsfiddle.net/LYhum/4/（对于不支持 flexbox 的浏览器有后备）

.container {
    margin: -10px 0 0 -10px;
    display: flex;
    -moz-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.container .image {
    margin: 10px 0 0 10px;
    background: red;
    width: 100px;
    height: 100px;
    display: inline-block;
}

Answer 2

如果你想让它们均匀分布，边缘到边缘，你必须做一些数学运算。

用你想要的边距减去正方形的宽度，这样就没有间隙了。

(width of container) - ((# of squares)*(width of squares))
divided by (# of squares - 1)) == margin required for even spacing

例如：

如果容器宽度是 300 像素，正方形是 30 像素，则让 margin-right == 37.5 像素（150 像素除以 4（它们之间有 4 个空格））...然后使用类似 :last-child 的技巧来纠正最后一个正方形. （或者只是硬编码最后一个方格上的 0 边距）如果不进行正确的数学运算，最后一个方格的间距将与其他 4 个方格不同。

| ------------------------   300px    ------------------| == the container
|square1-----square2-----square3-----square4-----square5|
|   ^     ^    ^      ^    ^      ^     ^      ^    ^
|  30   37.5   30    37.5  30   37.5   30    37.5  30   | == 300px

* not to scale :)


.square {
    width:30px;
    margin-right:37.5px;
}
#square5 {
    margin-right:0;
}

编辑这将完全取决于容器的宽度...如果它不是以像素为单位硬编码（即它是 %），那么我建议做同样的数学运算，但使用 %width 和 %margin反而。

Answer 3

我在这里假设<li>，但如果我错了，请纠正我：

ul.thumbs li {
  margin-right: 15px;
}
ul.thumbs li:last-child {
  margin-right: 0;
}

使用:last-child伪选择器。（请记住一些怪癖）