2

我有一个流体容器中的图像库。在最小尺寸（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

4

2 回答 2

2

我会使用媒体查询来确定不同的宽度 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);

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

于 2013-03-21T23:07:16.633 回答
1

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

于 2013-03-21T23:24:37.170 回答