Question

我正在尝试创建一个带有图像的div，它们之间有空间。例如，我希望它们之间的空间是2px，我可以使用margin:1px;所以当一个人的左边距与其他人的右边距相遇时，它将变为2px，顶部和底部相同。但是图像和div的边界之间也有空间，所以div会变成这样：

+------------------------------------------+
|                                          |
|  +---------------+    +---------------+  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |      IMG1     |    |      IMG2     |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  +---------------+    +---------------+  |
|           DIV                            |
|                                          |
|  +---------------+    +---------------+  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |      IMG3     |    |      IMG4     |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  +---------------+    +---------------+  |
|                                          |
+------------------------------------------+

当我真正想要做的时候，是这样的：

+---------------+---+---------------+
|               |   |               |
|               |   |               |
|               |   |               |
|      IMG1     |   |      IMG2     |
|               |   |               |
|               |   |               |
|               |   |               |
+---------------+   +---------------+
|        DIV                        |
|                                   |
+---------------+   +---------------+
|               |   |               |
|               |   |               |
|      IMG3     |   |      IMG4     |
|               |   |               |
|               |   |               |
|               |   |               |
+---------------+---+---------------+

如何做到这一点，没有为每个图像设置样式？

Answer 1

如果不能添加类或ID，并且您不想单独设置图像样式。然后，您可以尝试使用img:nth-child(n)或img:nth-of-type(n)。

首先为每个奇数图像分配一个右边距：

img:nth-of-type(odd){
    margin-right: 1px;
}

然后左边距到每个偶数：

img:nth-of-type(even){
    margin-left: 1px;
}

最后是每个图像的上边距，但前两个：

img:nth-of-type(n+3){
    margin-top: 2px;
}

你也可以省略左边或右边距之一并增加你留下的边距......从而减少你的样式的大小。

这是一个示例： jsfiddle 。在此示例中，容器div具有两个图像和边距的设置宽度，并且图像在左侧浮动。

Answer 2

jsfiddle example

您可以设置底部边距并将左侧列图像与CSS中的float属性对齐：

img {
    margin-bottom: /*your margin*/;
    float: left;
}

然后将右列图像移动到div容器的右侧：

nth-child(even) {
    float: right;
}

Answer 3

给所有图像一个相同的类＆amp;为它定义填充

试试这个

<div>
  <img src="1.jpg" class="myimage"/>
  <img src="2.jpg" class="myimage"/>
  <img src="3.jpg" class="myimage"/>
  <img src="4.jpg" class="myimage"/>
</div>

CSS

.myimage {
  display:block;
  padding:2px 2px 0 0;
}

如何在没有任何空间的图像之间间隔它们的容器

3 个答案: