ancho de fluidos con DIVs equidistantes + última fila alineado a la izquierda

Question

he fijado cajas de ancho en un diseño fluido y text-align: justify con esta solución publicado:

Fluid width with equally spaced DIVs

Pero ya que tengo un par de más filas en un diseño receptivo.

Esto es, por supuesto, sucede:

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

Pero me gustaría tener de esta manera:

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

Por supuesto justifican hace su trabajo pero hay una solución para esto sin usar javascript ¿hacer esto?

Pensé text-align-last: left podría funcionar, pero no funciona y aún no es oficial.

Idea para una posible solución:

me ocurrió una posible solución javascript pero necesito su ayuda para eso.

Aquí es mi idea de una posible solución:

Para obtener la última línea de izquierda alineados queremos realmente necesita para llenar esos espacios perdidos con cajas invisibles. Podríamos hacerlo fácilmente a mano, pero el número de divisiones es generado por el usuario y siempre diferente.

necesidad Así malezas saber el número de cajas que faltan y los añade a las que ya tenemos, para que funcione:

Así que aquí está mi (infantil) 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. 

No sé si hay manera de averiguar cuántos elementos hay en una fila para pasarlos a javascript. Esto sería una buena razón para que el formulario funcione para un diseño receptivo sin ajustar el número de fila cada vez que cambian con el ancho del navegador.

¿Es esta una buena idea?

Espero que algunos quieran hacer esto.

Aquí es un violín para trabajar con: http://jsfiddle.net/L2mPf/

Gracias.

Ver más allá de mi respuesta.

Answer 1

Ok, aquí está la solución fácil maldita con CSS:

sólo tiene que añadir tantos divs de cuántos en una fila sería (en este caso 4) y darles una altura de 1px.

Nada que ver y todo funciona como el encanto sin javascript.

Aquí está la nueva violín: http://jsfiddle.net/L2mPf/1/

Gracias a @GGG para mí centrarse de nuevo en CSS y esta solución.

Answer 2

Debe especificar la altura de las casillas. En este caso, el contenido de las casillas puede variar ya que las casillas no se alinean.

Answer 3

en su css establezca una altura mínima para sus cajas.

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

100px es, por ejemplo, e incluye un arreglo min altura para IE6

también puede querer a flotar a la izquierda (y el bloque de visualización) de sus cajas y luego clearfix contenedor principal para mantenerla abierta si la alineación el problema persiste (Ejemplo de CSS clearfix en el enlace)