Centrare più blocchi in linea con CSS e allineare l'ultima riga a sinistra

Question

Voglio centrare orizzontalmente alcuni blocchi in linea, ma allo stesso tempo li ho allineati a sinistra nella loro ultima riga (vedi sotto).

Il problema è che ho raggiunto qualcosa di simile (http://jsfiddle.net/5JSAG/):

|  _____ _____  | 
|  |  | |  |  | 
|  | 1 | | 2 |  | 
|  |_____| |_____|  | 
|   _____   | 
|   |  |   | 
|   | 3 |   | 
|   |_____|   | 

Mentre io voglio qualcosa di simile:

|  _____ _____  | 
|  |  | |  |  | 
|  | 1 | | 2 |  | 
|  |_____| |_____|  | 
|  _____    | 
|  |  |    | 
|  | 3 |    | 
|  |_____|    | 

potete vedere alcuni HTML di esempio a http://jsfiddle.net/5JSAG/.

Ho provato con column-count e column-width ma non funziona come voglio che, perché l'ordine dei blocchi cambiamenti:

|  _____ _____  | 
|  |  | |  |  | 
|  | 1 | | 3 |  | 
|  |_____| |_____|  | 
|  _____    | 
|  |  |    | 
|  | 2 |    | 
|  |_____|    | 

Answer 1

trovato piuttosto semplice soluzione a questo problema: basta aggiungere alcuni div riempitivo alla fine, che sono della stessa larghezza con i blocchi che sono allineati.

http://jsfiddle.net/5JSAG/34/

HTML:

<div style="text-align:center"> 
    <div class="entry">1</div> 
    <div class="entry">2</div> 
    <div class="entry">3</div> 
    <div class="entry">4</div> 
    <div class="entry">5</div> 
    <span class="fill"></span> 
    <span class="fill"></span> 
    <span class="fill"></span> 
    <span class="fill"></span> 
</div 

CSS:

.fill 
{ 
    display:inline-block; 
    width:100px; 
    height:0px; 
    line-height:0px; 
    font-size:0px; 
} 

.entry 
{ 
    display:inline-block; 
    margin-top:10px; 
    width:100px; 
    height:60px; 
    padding-top:40px; 
    border:1px solid red; 
} 

Answer 2

loro Floating sembra l'opzione migliore qui. È possibile inserire i margini sinistro/destro sul contenitore se è necessario spazio a sinistra e a destra, oppure è possibile assegnare al contenitore una larghezza e margini sinistro e destro automatici.

Sembra che valga la pena di considerare questo come un elenco non ordinato.

Ecco un esempio:

http://codepen.io/anon/pen/Ehgdp