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

Question

我有一个div列表，每个div里面都有一个图像。 在加载页面之前，图像的宽度是未知的。 我有一个宽度为960px的容器div。如何按行排列图像，每行具有行宽允许的图像数量？因此，例如，如果我有4个图像（300px，400px，200px，250px），我需要在一行中有前3个，而在第二行中有第4个，因为它们中的所有4个将在一行中获得宽度大于960.在每一行上，图像应居中。

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

任何想法？

Answer 1

类似于THIS？

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

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

Answer 2

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

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

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