Contenitore di larghezza del fluido per abbracciare galleggianti

Question

Ho un contenitore (galleria di immagini) che è larghezza massima: 80%. All'interno, le immagini sono flottate a sinistra formando colonne e righe. Come si compatta/espandere la finestra del browser, le immagini più o meno inseriscono in ogni riga e di solito c'è un "resto" alla fine di ogni riga, quando non c'è abbastanza spazio per adattarsi a un'altra immagine completa:

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

Vorrei che il contenitore si espandesse o si contrasse esattamente per abbracciare, tuttavia molti galleggianti entrano in una colonna (quindi non c'è mai un resto giallo a destra). Questo può essere fatto con 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

Sto pensando che potresti essere in grado di farlo con un jQuery .length() di div che ricalcola costantemente la larghezza e l'altezza necessarie in base alle dimensioni della finestra. Quindi, se ...

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

Poi ...

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

Si avrebbe bisogno di impostare le condizioni in istruzioni if ​​in base alle vostre esigenze, ma questo metodo dovrebbe farlo.

Answer 2

Esso non può essere fatto esclusivamente in CSS (soprattutto se deve essere cross-browser compatibile), il meglio che puoi fare è per impostare div larghezza in percentuale e quindi impostare il loro background css come se ci fosse:

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/

Ancora lontano dalla perfezione però.