html - CSS布局根据图像宽度在行上分配图像？

Question

我有一个 div 列表，每个 div 里面都有一个图像。在加载页面之前，图像的宽度是未知的。我有一个宽度为 960px 的容器 div。如何将图像排列成行，每行具有行宽允许的尽可能多的图像？因此，例如，如果我有 4 个图像（300px、400px、200px、250px），我需要将前 3 个图像放在一行中，将第 4 个图像放在第二行，因为将所有 4 个图像放在一行中会得到宽度大于 960。并且在每一行上，图像应该居中。

我已经尝试了所有我能想到的使用 css 的方法，但没有找到一种可行的方法。

有什么想法吗？

Answer 1

像这样的东西？

好的，我只使用了 div，因为我不想搜索图像，但主要观点是：需要对齐和拟合的元素，制作它们inline-block。内联变成多行，框可以设置宽度和高度。之后，您只需要在父级上设置：text-align: center

编辑 Oups，我在 div 之间放置了空格（如真实空格字符），它们显示为 div 之间的空格，因为它们是内联的。确保不要在容器之间放置任何空格，例如THIS

Answer 2

如果你丢失了容器，你甚至不需要使用inline-block.

http://jsfiddle.net/bryandowning/ghcmM/

但是，由于这是一个图像列表，您可能应该在无序列表inline-block的元素上使用。li