larghezza fluida con DIV equidistanti + ultima riga allineato a sinistra

Question

ho fissato scatole larghezza in un layout fluido e text-align: li giustifica con questa soluzione pubblicato:

Fluid width with equally spaced DIVs

Ma poiché ho una coppia di più righe in un layout reattivo.

Questo è naturalmente accade:

------ ------ ------ ------  
| | | | | | | |  
| | | | | | | | 
------ ------ ------ ------  
------ ------ ------ ------  
| | | | | | | |  
| | | | | | | | 
------ ------ ------ ------  
------   ------  ------  
| |   | |  | | 
| |   | |  | | 
------   ------  ------ 

Ma mi piace avere in questo modo:

------ ------ ------ ------  
| | | | | | | |  
| | | | | | | | 
------ ------ ------ ------  
------ ------ ------ ------  
| | | | | | | |  
| | | | | | | | 
------ ------ ------ ------  
------ ------ ------ 
| | | | | | 
| | | | | | 
------ ------ ------ 

Naturalmente giustificano fa il suo lavoro, ma c'è una soluzione a questo senza usare Javascript per Fai questo?

Pensavo che text-align-last: left potesse funzionare, ma non lo è e non è ancora ufficiale.

Idea per una possibile soluzione:

mi si avvicinò con una possibile soluzione javascript, ma ho bisogno del vostro aiuto per questo.

Ecco la mia idea per una possibile soluzione:

Per ottenere l'ultima linea di sinistra allineati avremmo davvero bisogno di riempire quegli spazi mancanti con scatole invisibili. Potremmo farlo facilmente a mano ma il numero di div è generato dall'utente e sempre diverso.

Così erbaccia necessità di conoscere il numero di caselle che mancano e li aggiunge a quelli che già abbiamo, per farlo funzionare:

Così qui è la mia (infantile) idea srcipting:

1. Count all divs 
2. Divide them with 4 (cause we have 4 in a row) 
3. If the SolutionA has no decimal, nothing will happen cause all is good 
4. If the SolutionA has a decimal, remove it 
5. SolutionA + 1 = SolutionB 
6. SolutionB x 4 (cause we have 4 each in a row) = SolutionC 
7. SolutionC - SolutionA = Number of divs we need to add. 

Non so se ci sia modo di scoprire quanti oggetti sono già in fila per passare a javascript. Questa sarebbe una buona causa quindi il formulare funzionerebbe per un layout reattivo senza regolare il numero di riga ogni volta che cambiano con la larghezza del browser.

Questa è una buona idea?

Spero che alcuni vorrebbero farlo.

Ecco un violino con cui lavorare: http://jsfiddle.net/L2mPf/

Grazie.

Vedere la mia risposta oltre.

Answer 1

Ok, ecco la soluzione dannatamente facile con i CSS:

Basta aggiungere tanti div di quanti in fila sarebbe (in questo caso 4) e dare loro una altezza di 1px.

Niente da vedere e tutto funziona come fascino senza javascript.

Ecco il nuovo violino: http://jsfiddle.net/L2mPf/1/

Grazie a @GGG per me concentrarsi di nuovo su CSS e questa soluzione.

Answer 2

È necessario specificare l'altezza per le caselle. Nel tuo caso in questo momento il contenuto delle caselle potrebbe variare a causa di questo le scatole non vengono allineate.

Answer 3

nel tuo css impostare un'altezza minima per le tue scatole.

.box-class { 
    min-height: 100px; 
    height: auto !important; 
    height: 100px; 
} 

100px è per esempio e include una correzione altezza minima per IE6

si consiglia inoltre di galleggiare a sinistra (e blocco display) le vostre scatole e poi clearfix il contenitore padre per tenerlo aperto se l'allineamento problema persiste. (Esempio di clearfix css nel link)