流式宽度容器自适应浮动元素

Question

流式宽度容器自适应浮动元素

csscss-floatcontainersfluidcontain

6

我有一个容器（图库），最大宽度为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;  
}

- Vlad

对于好问题加一。一开始我觉得，可以把外层容器设置成浮动。但这样不行。请稍等。 - Mr Lister

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bart Karp · Answer 1

这个纯粹使用CSS是做不到的（特别是如果要跨浏览器兼容），最好的方法是将div的宽度设置为百分比，然后像下面那样设置它们的CSS背景：

div {
    width:25%;
    height: 100px;
    float:left;
    background: transparent url('http://1.bp.blogspot.com/_muMRp22Klwo/SuGeqr4TeII/AAAAAAAAAVY/afpIYqkyPkM/s400/sad-dog.jpg') center center no-repeat;
}

http://jsfiddle.net/DRLXE/3/

虽然还远未达到完美。

- Plummer · Answer 2

我觉得您可以用jQuery的.length()来不断重新计算所需的宽度和高度，基于窗口大小进行调整。因此如果...

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语句中设置条件，但这种方法应该可以解决问题。