包装的固定宽度元素

Posted 2021-03-27

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

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

我试过把图像粘在：

1. 离开div的fixed-width的floats。问题是由于不同的高度，包裹的divs可能会“抓住”在上面一排的div的底部。
2. spans和lis：设置width: 200px或似乎没有固定宽度的任何东西;但它们确实很好。

答案

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

http://jsfiddle.net/bnmPR/

另一答案

你可以使用lis并使它们成为display:inline-block;

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

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

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

另一答案

你仍然可以使用浮动左边的div并添加这个脚本：http://masonry.desandro.com/

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