我有一些非常的高度和宽度不同的图像需要在Web应用程序的对话框中显示。
将图像放入表格看起来不太好，因为一些非常宽的图像会拉伸整个列，产生一个荒谬的效果。
使所有图像float: left非常接近我想要实现的目标：所有图像彼此相邻，当水平没有空间时，下一个图像将移动到下一行。
问题在于，由于图像的高度不同，这一点 - 移动到下一行 - 无法保证。通常，对此的补救措施是clear: both，但float: left我永远无法知道 我需要设置clear: both，因为我不知道图片的宽度。
我能看到的唯一方法是以编程方式计算每个图像的宽度（使用PHP或Javascript），当水平空间已满时，注入clear: both。但这是非常耗费资源的，我希望能够在没有它的情况下解决这个问题。
有没有办法用纯CSS实现这个目标？
我的问题是否清晰且易于理解？如果没有，请发表评论，我会澄清。
编辑：感谢您的输入人员。在图像上使用
display: inline可以正常工作。这增加了一些其他问题，但原则上，这是要走的路。
答案 0 :(得分：1)
显示：图像上的内联将让它们根据容器的固定宽度环绕到下一行
答案 1 :(得分：0)
不幸的是，您将不得不使用服务器端脚本或客户端脚本来解决此问题。
答案 2 :(得分：0)
考虑将它们强制为固定宽度/高度的缩略图格式，并添加链接/ onclick以在对话框中显示完整图像。
E.g。
<img src="img1.jpg" width="100" height="75" onclick="window.open('img1.jpg')">
<img src="img2.jpg" width="100" height="75" onclick="window.open('img2.jpg')">
<img src="img3.jpg" width="100" height="75" onclick="window.open('img3.jpg')">
...
您甚至可以使用lightbox来制作精美的幻灯片/自动调整大小的演示文稿。