图像之间的内部间距？

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

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

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

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

Answer 3

如果你想要它们在边缘到边缘之间均匀分布，你将不得不做一些数学运算。

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

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

例如：

如果容器宽度为300px，正方形为30px，则使margin-right == 37.5px（150px除以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。