Bình chứa chiều rộng chất lỏng để ôm nổi

Question

Tôi có vùng chứa (thư viện hình ảnh) có chiều rộng tối đa: 80%. Bên trong, hình ảnh được thả nổi bên trái tạo thành cột và hàng. Khi bạn thu nhỏ/mở rộng cửa sổ trình duyệt, nhiều hoặc ít hình ảnh phù hợp với mỗi hàng và thường có phần "phần còn lại" ở cuối mỗi hàng, khi không có đủ không gian để vừa với hình ảnh đầy đủ khác:

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

Tôi muốn hộp chứa mở rộng hoặc hợp đồng để ôm chính xác tuy nhiên nhiều phao phù hợp với một cột (vì vậy không bao giờ có phần còn lại màu vàng ở bên phải). Điều này có thể được thực hiện với 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

Tôi nghĩ bạn có thể làm điều này với jQuery .length() của div liên tục tính lại chiều rộng và chiều cao cần thiết dựa trên kích thước cửa sổ. Vì vậy, nếu ...

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

Sau đó ...

$(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(); 
}); 

Bạn sẽ cần phải thiết lập các điều kiện trong câu lệnh if dựa trên nhu cầu của bạn, nhưng phương pháp này nên làm điều đó.

Answer 2

Nó không thể được thực hiện hoàn toàn trong CSS (đặc biệt là nếu nó có để được cross-browser compatibile), tốt nhất bạn có thể làm là để đặt độ rộng div theo phần trăm và sau đó đặt nền css của chúng như ở đó:

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/

Vẫn còn xa sự hoàn hảo.