Si css3 es una opción, esto se puede hacer usando la calc()función css .
Caso 1: Justificar cuadros en una sola línea ( FIDDLE )
El marcado es simple: un montón de divs con algún elemento contenedor.
CSS se ve así:
div
{
height: 100px;
float: left;
background:pink;
width: 50px;
margin-right: calc((100% - 300px) / 5 - 1px);
}
div:last-child
{
margin-right:0;
}
donde -1px para corregir un error de IE9 + calc / redondeo - ver aquí
Caso 2: Justificación de cuadros en varias líneas ( FIDDLE )
Aquí, además de la calc()función, media queriesson necesarios.
La idea básica es configurar una consulta de medios para cada #columnas de estados, donde luego uso calc () para calcular el margen derecho de cada uno de los elementos (excepto los de la última columna).
Esto parece mucho trabajo, pero si está usando MENOS o SASS, esto se puede hacer con bastante facilidad.
(Todavía se puede hacer con CSS normal, pero luego tendrá que hacer todos los cálculos manualmente, y luego, si cambia el ancho de su caja, tendrá que resolver todo de nuevo)
A continuación se muestra un ejemplo usando MENOS: (Puede copiar / pegar este código aquí para jugar con él, [también es el código que usé para generar el violín mencionado anteriormente])
@min-margin: 15px;
@div-width: 150px;
@3divs: (@div-width * 3);
@4divs: (@div-width * 4);
@5divs: (@div-width * 5);
@6divs: (@div-width * 6);
@7divs: (@div-width * 7);
@3divs-width: (@3divs + @min-margin * 2);
@4divs-width: (@4divs + @min-margin * 3);
@5divs-width: (@5divs + @min-margin * 4);
@6divs-width: (@6divs + @min-margin * 5);
@7divs-width: (@7divs + @min-margin * 6);
*{margin:0;padding:0;}
.container
{
overflow: auto;
display: block;
min-width: @3divs-width;
}
.container > div
{
margin-bottom: 20px;
width: @div-width;
height: 100px;
background: blue;
float:left;
color: #fff;
text-align: center;
}
@media (max-width: @3divs-width) {
.container > div {
margin-right: @min-margin;
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @3divs-width) and (max-width: @4divs-width) {
.container > div {
margin-right: ~"calc((100% - @{3divs})/2 - 1px)";
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @4divs-width) and (max-width: @5divs-width) {
.container > div {
margin-right: ~"calc((100% - @{4divs})/3 - 1px)";
}
.container > div:nth-child(4n) {
margin-right: 0;
}
}
@media (min-width: @5divs-width) and (max-width: @6divs-width) {
.container > div {
margin-right: ~"calc((100% - @{5divs})/4 - 1px)";
}
.container > div:nth-child(5n) {
margin-right: 0;
}
}
@media (min-width: @6divs-width){
.container > div {
margin-right: ~"calc((100% - @{6divs})/5 - 1px)";
}
.container > div:nth-child(6n) {
margin-right: 0;
}
}
Entonces, básicamente, primero debe decidir el ancho de la caja y el margen mínimo que desea entre las cajas.
Con eso, puede calcular cuánto espacio necesita para cada estado.
Luego, use calc () para calcular el margen derecho y nth-child para eliminar el margen derecho de los cuadros en la columna final.
La ventaja de esta respuesta sobre la respuesta aceptada que utiliza text-align:justifyes que cuando tiene más de una fila de casillas, las casillas de la fila final no se 'justifican', por ejemplo: si quedan 2 casillas en la fila final: I no quiero que el primer cuadro esté a la izquierda y el siguiente a la derecha, sino que los cuadros se sucedan en orden.
Con respecto al soporte del navegador : Esto funcionará en IE9 +, Firefox, Chrome, Safari6.0 + - (vea aquí para más detalles) Sin embargo, noté que en IE9 + hay un pequeño problema entre los estados de consulta de medios. [si alguien sabe cómo solucionar esto, me gustaría saber :)] <- FIJO AQUÍ
display:inline-block;lugar de flotar?