0

我有几行这样的图像

<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。

我可以通过计算每行的总空白空间然后将其在图像中划分为边距来做到这一点，但我希望有一些更简单的东西可以应用于每一行，而不必计算和编码一个单独的每一行。

4

2 回答 2

0

如果您想实现仅使用 CSS 的好东西（这并不理想，因为这里需要逻辑），您可以人为地将图像宽度调整为相同（但不推荐）并简单地添加适当的边距。知道每个的宽度显然有帮助。

CSS：

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

希望这可以帮助？如果您真的想要多样化和紧凑的图像布局，请尝试使用 jQuery 和 Masonary 插件：

http://masonry.desandro.com/

它是如此易于使用，以至于不利用如此漂亮的插件实际上是一种犯罪！

于 2012-10-11T09:34:59.207 回答
-1

考虑到我不想手动计算每一行的边距，这似乎不适用于 css，所以我只是用 jQuery 完成了

于 2012-10-11T15:31:09.353 回答