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

如果你想要实现一些只使用CSS的东西（这不是理想的，因为这里需要逻辑）你可以人为地调整图像宽度的大小（不推荐），只需添加适当的边距。知道每个的宽度显然有帮助。

<强> CSS：

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

希望这有帮助吗？如果你真的想要多样化和压缩的图像布局，请尝试使用带有Masonary插件的jQuery：

http://masonry.desandro.com/

这很容易使用，如果不利用这么漂亮的插件实际上是一种犯罪行为！

Answer 2

考虑到我不想手动计算每一行的边距，似乎这对css来说似乎不可行，所以我只是用jQuery完成它

水平间隔一行图像

2 个答案: