水平均匀地间隔一行图像

Question

我有几排这样的图像

<div class="row">
  <img src="image.jpg" alt="">
  <img src="image.jpg" alt="">
  <img src="image.jpg" alt="">
  <img src="image.jpg" alt="">
  <img src="image.jpg" alt="">
</div>

每个图像具有不同的宽度，并且每行上也有不同数量的图像(4-6个)。我想在行中均匀地间隔图像，该行有一个固定的宽度为960px。

我可以通过计算每一行的总空闲空间，然后在图像之间划分一个边距来实现这一点，但我希望有一些更简单的方法可以应用于每一行，而不是必须为每一行计算和编写单独的空闲空间。

Answer 1

考虑到我不想手动计算每一行的边距，所以我只用jQuery来做，这看起来不太可能

Answer 2

如果你想实现只使用CSS的好东西(这并不理想，因为这里需要逻辑)，你可以人为地调整图像宽度使其相同(但不推荐)，并简单地添加适当的边距。了解每个元素的宽度显然会有所帮助。

CSS:

.row img { 
display: inline; 
width: 100px; 
height: auto; 
margin: 0 20px 20px 0; 
padding: 0; 
}

希望这能有所帮助？如果你真的想要图像的多样化和紧凑的布局，可以尝试将jQuery与砖石插件一起使用：

http://masonry.desandro.com/

它非常容易使用，如果不使用这样一个漂亮的插件，那几乎是一种犯罪！