Question

我正在拉动宽度相同但高度不同的图像。我试图在没有添加垂直空间的行中显示它们。

例如，如果第1行的图像分别为100px 150px和70px，我希望第二行的图像直接显示在每个图像的相应高度下面。

现在，我将浮动设置为左侧，适用于水平显示。添加clear：left会产生所需的效果，但会将所有内容放在一列中。如何将图像包裹到左侧，但是在下方垂直显示？

事实上，前3个下方的任何图像都将显示在150px图像下方的图像的相同行高处，并且在100px和70px图像下方具有大的垂直空间。

Answer 1

如果您将它们显示为行，图像将按行排列，您无法做到这一点。

我认为您更愿意在列中显示它们，这样一列中的图像不会影响其他列中的图像。只需将列浮动，并将图像放在其中，就可以将列彼此放在一起。

HTML：

<div class="column">
  <img ... />
  <img ... />
  <img ... />
</div>
<div class="column">
  <img ... />
  <img ... />
  <img ... />
</div>
<div class="column">
  <img ... />
  <img ... />
  <img ... />
</div>

CSS：

.column { float: left; }
.column img { display: block; }

Answer 2

经过一番挖掘，它是jQuery和CSS的组合，使我想要的东西成为可能。特别是jQuery Masonry。

http://desandro.com/demo/masonry/docs/basic-single-column.html

如何在没有垂直空间的情况下拍摄图像？

2 个答案: