如何在没有JavaScript的情况下以恒定高度按顺序显示图像?

时间:2014-07-13 16:14:25

标签: html html5 css3 masonry

我有一堆我想在网页上显示的图片。每张图片都有不同的高度和宽度。我想将它们连续显示(根据浏览器窗口的宽度包裹到下一行),具有恒定的高度但固定的宽高比以防止倾斜。如何在没有任何插件或JavaScript的纯CSS3 / HTML中执行此操作?

例如,图像将显示为:

[1] [2] [3] [4]
[5] [6   ] [7 ]
[8     ] [9   ]
[10           ]

但如果浏览器宽度增加:

[1] [2] [3] [4] [5] [6   ] 
[7 ][8     ] [9   ][10   ]

每张图片都有固定的高度,但宽度可能会有所不同。

我见过一堆可以做到这一点的砌体插件,但有没有办法在没有插件的情况下做到这一点?此外,我见过的大多数插件都是从上到下垂直显示内容......我有兴趣保持从左到右的顺序。

0 个答案:

没有答案