流体宽度容器拥抱浮游物

我有一个容器（图片库）是最大宽度：80％。在里面，图像浮起来形成列和行。当你缩小/扩大浏览器窗口，更多或更少的图像融入每一行，通常有一个“剩女”在每一行，结束时没有足够的空间，以适应另一个完整的图像：流体宽度容器拥抱浮游物

我希望容器扩展或收缩到恰好拥抱，但是很多浮体适合一列（所以绝不会有黄色的剩余部分）。这可以用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; 
}

来源

2013-02-01 Vlad

+1为好问题。起初我想，当然，也只是漂浮外部容器。但那不行。支持。 –

我想你也许可以用一个jQuery的div是不断.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语句，但这种方法应该这样做。

来源

2013-02-01 16:58:09 Plummer

这就是我的想法。我想也许有一些我可以使用的CSS怪癖。谢谢。 – Vlad

它不能纯粹CSS（尤其是如果它是跨浏览器compatibile）做，你能做的最好的是设置的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/

尽管离完美还很远。

来源

2013-02-01 15:20:23

流体宽度容器拥抱浮游物

回答

相关问题