1

我有一个 div，其中每行有 3 个图像。图像都是相同的大小。我一直在使用小的完全清晰的透明图像，然后我会明确给出高度和宽度以在图像之间形成空间。一个例子是这样的：

 div begin
 space image width=15, height=1 actual image (no explicit dimensions)
 space image width=10, height=1 actual image (no explicit dimensions)
 space image width=10, height=1 actual image (no explicit dimensions)

 space image width=900, height=20 (this is to separate rows, which should be 900 wide, space + 3 x image)

 space image width=15, height=1 actual image (no explicit dimensions)
 space image width=10, height=1 actual image (no explicit dimensions)
 space image width=10, height=1 actual image (no explicit dimensions)
 div end

这些行可能会或可能不会通过代码生成，有时会有href。我意识到我也许可以在图像/或锚元素上使用边距/填充来创建空间。但这需要在每个图像上设置一个类。这似乎不是解决这个问题的好方法。出于几个原因：空间将在锚标签内，使其可链接。我不会反对使用 div 并在它们上使用特定的类。但是，我已经尝试过了，但它们似乎没有像我预期的那样工作。它们创建了换行符，所以现在图像出现在一个列中，而且它们似乎并没有占用任何实际空间。

4

3 回答 3

2 
  How about 2 divs, one for each row. Then set the margins on those.

  <div class="row"> Your images or anchor tags</div>
  <div class="row"> Your images or anchor tags</div>

然后

 .row{
      margin-top:10px;

  }

或者你想要的图像行之间的空间。

您可以对图像使用 div 以便更好地在屏幕上定位它们。特别是希望避免向锚标签添加边距。

 div.img{
     display:inline;
 }

 .firstcol{
     margin-left:15px;
 }

 .col{
     margin-left:10px;
 }

和

 <div class="img firstcol">The first image of teh row</div>
 <div class="img col">The second image of teh row</div>

等等

于 2012-12-15T10:48:36.987 回答
1

使用间隔图像相当笨拙，几乎不需要。最简单的方法可能是将所有图像包装在a元素中，仅<a><img ...></a>用于那些不应该作为链接的图像。然后您可以在a元素上设置边距，而无需使边距可点击。

您还可以将图像库格式化为三行图像，而无需将这种划分作为 HTML 代码的一部分。例子：

.gallery img { border: 0; margin-bottom: 20px;  }
.gallery a:nth-child(3n+1) { margin-left: 15px; }
.gallery a:nth-child(3n+2) { margin-left: 10px; margin-right: 10px; }
.gallery a:nth-child(3n+3):after { content: "\A"; white-space: pre; }

这有效地使布局类似于表格，而无需将划分硬编码为 HTML 中的列。最后一条规则有点棘手（但有效），它会在每个第三个元素之后导致换行。

jsfiddle

PS 这也会在最后一行图像下方创建 20 像素的边距。如果这是一个问题，您可以通过设置来取消它.gallery { margin-bottom: -20px }。

于 2012-12-15T12:09:25.897 回答
0

这就是我的工作：

.row {
  margin-left:20px;
}
.space {
  margin-left:12px;
  display: inline;
}
.row-space {
  margin-bottom:20px;
}

div class=row
  a href=x img
  div class=space /div
  a href=x img
  div class=space /div
/div

div class=row-space /div

我需要 display-inline 来避免换行。过去，我已经阅读并使用过 float: left，但这还有一些其他副作用，不利于此目的。

于 2012-12-15T11:43:08.897 回答