包装的固定宽度元素

Question

我想在我的页面中显示一些缩略图。缩略图的宽度不一定都是相同的，也不是高度。我想要做的是以表格格式排列它们，使元素排列整齐的行和列，每个“单元格”是相等的指定宽度。

我不想使用表格，因为我希望行/列的数量能够在浏览器重新调整大小时自动重新调整大小。

我已尝试将图片粘贴在：

剩下div的{​​{1}}的{​​li>

fixed-width个。问题是由于不同的高度，包裹的float可能会“抓住”上面一行div的底部。

1. div s和span s：设置li或其他似乎没有修复宽度的内容;但它们确实很好。

Answer 1

如果您在跨度或lis上使用display: inline-block，则应允许您设置宽度。

http://jsfiddle.net/bnmPR/

Answer 2

您可以使用li s并将其设为display:inline-block;

http://jsfiddle.net/jasongennaro/zDC2w/

将窗口拖过来查看它是否有效。

添加

边框，宽度和高度以显示效果

Answer 3

您仍然可以使用向左浮动的div并添加此脚本：http://masonry.desandro.com/

它将垂直向上推动div，使它们彼此相邻。