griglia dinamica CSS e jQuery

[dumbsim]

Ciao a tutti,

vorrei fare un layout che abbia questo aspetto:

in pratica delle linee che contengano immagini, di altezza fissa e larghezza variabile.
Queste "linee" sono contenute in un div a larghezza fissa e quindi in base alla dimensione delle immagini in ogni riga ce ne sta un numero variabile.

Le immagini sono inserite in un elenco <ul> e posizionate con il css:

li img {
    float: left;
}

Volendo inserire una linea fra ogni riga di immagini ho usato jQuery per calcolare la somma della larghezza delle immagini e quando questa supera la larghezza del div contenitore inserisce un elemento <li class=line> a cui è associato il css:

li.line {
    border-bottom: 1px solid #ccc;
}

Fin qua nessun problema, le immagini vanno a capo e appaiono le linee. Solo che vorrei "giustificare" le immagini come nella figura, mentre avendo float: left queste si allineano tutte a sinistra.

Qualcuno ha un idea su come procedere?

[cavicchiandrea]

li img {
float: left;
margin-left:10px;
margin-right:10px;
}
Cosi non funziona

P.S. chiaramente potrai usare anche un solo margine