css - 如何让图像在没有垂直空间的情况下环绕？

Question

我正在拉取宽度相同但高度不同的图像。我试图在不增加垂直空间的情况下将它们显示在行中。

例如，如果第 1 行的图片分别为 100 像素、150 像素和 70 像素高，我希望第二行的图片以相应的高度直接显示在每张图片的下方。

现在，我将 float 设置为左侧，这适用于水平显示。添加一个 clear: left 可以达到预期的效果，但会将所有内容放在一个列中。如何让图像向左环绕，但垂直显示在下方？

实际上，前 3 张下方的任何图片都将以与 150 像素图片下方的行高相同的行高显示，并且 100 像素和 70 像素图片下方有较大的垂直空间。

Answer 1

如果将它们显示为行，图像将排成行，对此您无能为力。

我认为您更愿意将它们显示在列中，这样一列中的图像就不会影响其他列中的图像。只需通过 float 将列并排放置，并在其中放置图像。

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; }