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;  
}
4

2 回答 2

0

我想你也许可以用一个 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 语句中设置条件，但是这种方法应该可以做到。

于 2013-02-01T16:58:09.133 回答
0

它不能纯粹在 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/

虽然离完美还差得很远。

于 2013-02-01T15:20:23.623 回答