我有许多高度和宽度非常不同的图像，我需要在 Web 应用程序的对话框中显示这些图像。
将图像放入表格中看起来不太好，因为一些非常宽的图像会拉伸(stretch)整个列，产生可笑的结果。
让所有图像 float: left 非常接近我想要实现的目标:所有图像都彼此相邻，当水平方向上没有空间时，下一张图像将移动到下一行。
问题是，由于图像的高度不同，无法保证移动到下一行。通常，解决这个问题的方法是 clear: both 但是使用 float: left 我永远不知道什么时候我需要设置 clear:两者都是，因为我不知道图片的宽度。
我能看到的解决此问题的唯一方法是以编程方式计算每个图像的宽度(使用 PHP 或 Javascript)，并且当水平空间已满时，注入(inject) clear: both。不过，这非常耗费资源，我希望能够在没有它的情况下解决这个问题。
有什么方法可以使用纯 CSS 实现这一点吗？
我的问题是否足够清晰易懂？如果不是请发表评论，我会澄清。
Edit: Thanks for your input folks. Using
display: inlineon the images works fine. This adds a few other issues but in principle, this is the way to go.
最佳答案
display:inline on the images 会让它们根据容器的固定宽度换行到下一行
关于html - 使用 'float: left' 在 HTML 表格中列出图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1936818/