流体宽度容器,以拥抱浮动

Question

我有一个容器(图片库),最大宽度:80%.在里面,图像向左浮动形成列和行.当您缩小/展开浏览器窗口时,每行中会有更多或更少的图像,并且当没有足够空间容纳另一个完整图像时,每行末尾通常会有一个"余数":

http://jsfiddle.net/vladmalik/DRLXE/1/

我希望容器能够扩展或收缩以完全拥抱,但是许多浮子适合放入一个柱子(因此右边没有黄色的剩余部分).这可以用CSS完成吗？

HTML:

<section>  
   <div></div>  
   <div></div>  
   <div></div>  
   <div></div>  
   <div></div>  
</section>  

CSS:

div {  
   width: 100px;  
   height: 100px;  
   float:left;  
   background: red;  
}  

section {  
   margin: 0 auto;  
   max-width: 80%;  
   background:yellow;  
   overflow: hidden;  
}  

Answer 1

我想你也许可以使用 jQuery 来做到这一点，.length()它div会根据窗口大小不断重新计算所需的宽度和高度。因此，如果...

div {
  width: 100px;
  height: 100px;
  float: left;
} 

然后...

$(document).ready(function(){
    changeSize();
});

function changeSize(){
    var length = $('div').length(); //let's say is 12 

    var windowwidth = $(window).width(); //let's say it's 1000px, 

    if (length >= 10 && windowwidth >= 600px){ 
        $('section').css('width', '300px'); 
        $('section').css('min-height', '400px'); 
    }
    else if {
        //Some more sizing code...
    }
}

$(window).resize(function() {
    changeSize();
});

您需要根据需要在 if 语句中设置条件，但此方法应该可以做到。