如何让图像在没有垂直空间的情况下包装？

Posted 2023-03-05

【中文标题】如何让图像在没有垂直空间的情况下包装？

【英文标题】：How can I get images to wrap with no vertical space?

【发布时间】：2011-07-23 17:21:46

【问题描述】：

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

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

现在，我将浮动设置为左侧，这适用于水平显示。添加 clear: left 会产生所需的效果，但会将所有内容放在单个列中。如何让图像向左环绕，但垂直显示在下方？

事实上，前 3 个下方的任何图像都将显示在与 150 像素图像下方相同的行高处，而 100 像素和 70 像素图像下方的垂直空间很大。

【参考方案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; 

【讨论】：

我考虑过，但是图像的数量会因页面而异（它们是动态拉出的），因此很难按列设置样式/使用 clear 使它们垂直对齐，因为我赢了事先不知道每列有多少张图片。

@user678537：只需将第一张图片放在第一列，第二张图片放在第二列，以此类推。这比将图像逐个放置要困难得多，但这就是您需要做的以摆脱水平空间。

这一切都是动态的，没有一个图像是固定的或静态的。一天我可能有 70 张图像，下一天有 100 张图像，另外这将相当于对每个图像进行单独的查询，我担心这将成为资源消耗，因为拉取它们的查询是通过几个选择器开始运行的.我只是坚持通过样式来处理它，因为我已经在网站上看到它完成了（虽然复制他们的样式元素不起作用）

@user678537：如果您的服务器语言受到限制，也可以使用客户端脚本更改布局。这很可能是他们在您看到它的页面上使用的，如果是这样，那么仅复制样式不起作用的原因。您可以创建三个空列并在其后列出图像，然后在其后放置一个脚本，将图像元素移动到列中。

这与限制服务器语言无关。这是因为我正在处理大量图像，其数量每天都会变化，而现在我有一个查询可以返回给定日期的所有图像。按照您建议的方式进行操作会起作用，但如果我有 100 张图像，这也意味着 100 个不同的查询来显示每张图像，当一个查询完成这项工作时，我发现这是一种浪费。

【参考方案2】：

经过更多的挖掘，它是 jQuery 和 CSS 的组合，使我正在寻找的东西成为可能。特别是 jQuery Masonry。

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