Fluid Breite Container zu schweben

Question

Ich habe einen Container (Bildergalerie), die max-Breite: 80% ist. Im Inneren schweben die Bilder links und bilden Spalten und Reihen. Wenn Sie das Browserfenster verkleinern/vergrößern, passen mehr oder weniger Bilder in jede Zeile und es gibt normalerweise einen "Rest" am Ende jeder Zeile, wenn nicht genug Platz für ein anderes Vollbild vorhanden ist:

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

Ich möchte, dass sich der Container ausdehnt oder zusammenzieht, um genau zu umarmen, aber viele Floats passen in eine Spalte (also gibt es nie einen gelben Rest auf der rechten Seite). Kann das mit CSS gemacht werden?

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

Ich denke, Sie könnten dies mit einem jQuery .length() von div tun, die ständig die benötigte Breite und Höhe basierend auf Fenstergröße neu berechnet. Also, wenn ...

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

Then ...

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

Sie müßten die Bedingungen in den if-Anweisungen nach Ihren Bedürfnissen einzustellen, aber diese Methode sollte es tun.

Answer 2

Es kann nicht rein in CSS getan werden (vor allem, wenn es Cross-Browser compatibile sein muss), das Beste, was Sie tun können, ist ihre CSS-Hintergründe gesetzt in Prozent Breite divs und legen Sie dann wie dort:

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/

Immer noch weit von Perfektion.