CSS / JS：将图块左右对齐

Question

我的缩略图始终具有相同的图像宽度 ，并且可能具有不同的图像高度。

现在，我想将它们全部对齐，以使缩略图/图块概览中没有“空白”。 我现在只剩下它们了。 但这给出了以下结果。

没有为此提供的JS库吗？ （=对齐具有相同宽度，不同高度，没有任何缝隙的瓷砖？）

Answer 1

您正在寻找的是一个名为Masonry的jQuery插件。 众所周知，这是种痛苦。 根据您应用程序的规模，我会使用CSS3或flex-box替代方案。

jQuery Masonry- http://masonry.desandro.com/

CSS3石工-http: //w3bits.com/css-masonry/

Flex-Box砌体-http: //thenewcode.com/844/Easy-Masonry-Layout-With-Flexbox

希望这些链接能对您有所帮助。 :)

Answer 2

仍然不是很好的专栏也许可以为您提供帮助。 我可以使用专栏吗？

 div.wrapper { -webkit-columns: 300px 2; -moz-columns: 300px 2; columns: 300px 2; -webkit-column-rule: 1px dotted rgb(0, 0, 0); -moz-column-rule: 1px dotted rgb(0, 0, 0); column-rule: 1px dotted rgb(0, 0, 0); text-align: center; } 

 <div class="wrapper"> <img src="http://lorempixel.com/image_output/nature-hc-300-450-2.jpg"> <img src="http://lorempixel.com/image_output/people-hc-300-601-10.jpg"> <img src="http://lorempixel.com/image_output/nature-hc-300-306-10.jpg"> <img src="http://lorempixel.com/image_output/abstract-qc-300-148-2.jpg"> <img src="http://lorempixel.com/image_output/cats-hc-300-627-4.jpg"> <img src="http://lorempixel.com/image_output/technics-hc-300-460-8.jpg"> </div>