Pojemnik szerokości płynu do ujęcia pływaka

Question

Mam pojemnik (galerię obrazów) o maksymalnej szerokości: 80%. Wewnątrz obrazy są unoszone w lewo tworząc kolumny i rzędy. Jak można zmniejszyć/powiększyć okno przeglądarki, mniej lub więcej obrazów pasuje do każdego wiersza i nie jest typowo „reszta” na końcu każdego rzędu, kiedy nie ma wystarczająco dużo miejsca, aby zmieścić kolejny pełny obraz:

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

Chciałbym, aby pojemnik rozszerzał się lub zwężał tak, jak wiele pasuje do kolumny (tak, że po prawej nigdy nie ma żółtej). Czy można to zrobić za pomocą 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

Myślę, że możesz to zrobić z jQuery .length() z div, która stale przelicza potrzebną szerokość i wysokość w zależności od rozmiaru okna. Więc jeśli ...

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

Potem ...

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

Trzeba by ustawić warunki w instrukcji if w zależności od potrzeb, ale ta metoda powinna wystarczyć.

Answer 2

To nie może być wykonane wyłącznie w CSS (szczególnie jeśli ma być kompatybilne z różnymi przeglądarkami), najlepiej można zrobić, to ustawić div szerokość w procentach, a następnie ustawić ich css tła jak tam:

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/

Jeszcze daleko do perfekcji.