我有一组具有不同宽度和高度的图像，我想在 4 列中将它们彼此对齐(中间没有垂直空白)。例如:
<html>
<body>
<div>
<img src="https://pbs.twimg.com/profile_images/425063504039538688/sO0mRdKW.jpeg" width="300px">
<img src="http://w-uh.com/images/1401/cool_picture.jpg" width="300px">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2014/01/l-These-are-pictures-of-Jari.jpg" width="300px">
<img src="http://images4.fanpop.com/image/photos/21900000/Beautiful-Pictures-_-beautiful-pictures-21967793-1024-768.jpg" width="300px">
<img src="http://images4.fanpop.com/image/photos/22600000/Random-beautiful-pictures-22607571-500-333.jpg" width="300px">
<img src="https://pbs.twimg.com/profile_images/425946167050911744/x62a9eBz_400x400.jpeg" width="300px">
<img src="http://ichef.bbci.co.uk/wwfeatures/624_351/images/live/p0/16/0s/p0160sdl.jpg" width="300px">
<img src="http://i.dailymail.co.uk/i/pix/2014/01_01/Racecourse_650x311.jpg" width="300px">
</div>
</body>
如您所见，第一行和第二行的图片之间有空白。我想以这种方式对齐每个图像，以便列中上下图像之间没有空白。现场示例:http://goldenrepublictattoo.com/collection
我已经设法将最后一列与 float: left 属性对齐，但其他列保持未对齐。是否有类似 float: top 的东西来对齐图像？
最佳答案
这仅靠 CSS 是不可能的。最好的办法是使用砖石之类的东西。或者根据您希望它的行为方式编写一些自定义 JavaScript。
HTML:
<div id="container">
<img class="item" />
<img class="item" />
<img class="item" />
</div>
JS:
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.item'
});
演示和文档:
关于javascript - 在几列中将图像彼此对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30267304/