Question

我有一个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并在这些上使用特定的类。我尝试过这个，但它们似乎没有像我期望的那样工作。它们创建换行符，所以现在图像显示在一列中，并且它们似乎不占用任何实际空间。

Answer 1

  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>

等

Answer 2

使用间隔图像相当笨拙，几乎不需要。最简单的方法可能是将所有图像包装在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中的列。最后一条规则是在每个第3个元素之后引起换行的有点棘手（但有效）的方法。

jsfiddle

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

Answer 3

这就是我的工作：

.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来避免换行。我曾阅读并使用过浮动：左，过去，但这有一些其他不利于此目的的副作用。

在HTML / CSS文档中创建空间的最佳方法是什么？

3 个答案: