是否可以随着容器宽度的增加均匀分布图像，同时增加或减少每行中的项目数？

Posted 2023-04-13

【中文标题】是否可以随着容器宽度的增加均匀分布图像，同时增加或减少每行中的项目数？

【英文标题】：Is it possible to evenly distribute images as container width increases, while increasing or decreasing the number of items in each row?

【发布时间】：2013-03-11 16:32:46

【问题描述】：

我在一个流体容器中有一个图片库。在最小尺寸（980 像素）下，有 5 张图片，最后一张图片没有边距，所以所有东西都很好地适合容器。

当我增加窗口的宽度时，右边总是有额外的空间，直到有足够的空间让下一张图片出现。很典型。我尝试使用自适应图像，但它们对于手头的任务来说有点太大了。

是否可以在灵活的 div 上均匀分布图像（我知道这可能使用 justify css），直到有足够的空间容纳行中的另一个图像，此时它将被包括在内？

我目前有一个列表中的图像。

    <ul>
      <li>image</li>
      <li>image</li>
      <li>image</li>
      <li>image</li>
    </ul>

项目向左浮动，有一个左边距，除了第一个孩子，它的边距为：0；

很合身（5 个）。 http://d.pr/i/q24L

不太好（超过 6 个）： http://d.pr/i/VAHi

【问题讨论】：

你有浏览器控制还是你需要它在所有/大多数浏览器中工作？

应该在大多数浏览器中工作......即8+ / ff / chrome / safari

【参考方案1】：

我会使用媒体查询来确定不同的宽度 IE：

@media screen and (max-width: 580px) 

//styles for 5 columns 


@media screen and (max-width: 650px) 

//styles for 6 columns 

显然，我选择的宽度是任意的。您需要知道每列的这些尺寸是正确的

根据您的评论，我为 JS 解决方案（在 jquery 中）做了一个小提琴。这是小提琴：http://jsfiddle.net/yEeKe/6/

JS 看起来像这样：

(function($)
    $('#myUL').width($(window).width() - ($(window).width() % $('img').first().width())); 
    $(window).resize(function()
        $('#myUL').css('width', ($(window).width() - ($(window).width() % $('img').first().width())) +'px');     
    ); 
)(jQuery);

没有媒体查询。显然，你会调整它以适应你的特定设计....

【讨论】：

是的。我可以看到这个工作，但如果可能的话，不想添加 5 或 6 个媒体查询。希望它可以用js或其他东西动态完成。

你当然可以用 JS 来做。我只是以为你想要一个 CSS 解决方案。

如果这样更容易的话，我也可以做一个 JS 答案？

如果你想走这条路，为你添加了一个 jquery 解决方案。

【参考方案2】：

这可以使用display: inline-block; 和text-align: justify; (http://jsfiddle.net/7JZJq/2/) 来实现。但是，可能没有足够的图像来完全填充最后一行。在这种情况下，该行中图像之间的间距会有所不同。

【讨论】：

您可能会以某种方式修改它以说明最后一行是否有两个项目，然后将它们左对齐对吗？现在如果有两个项目，一个在左边，另一个在右边。这就是我想要的。

是的..最后一行与上面的行间隔不均匀。