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:
codice:
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:

codice:
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?