Se css3 for uma opção, isso pode ser feito usando a calc()
função css .
Caso 1: justificando caixas em uma única linha ( FIDDLE )
A marcação é simples - um monte de divs com algum elemento container.
CSS fica assim:
div
{
height: 100px;
float: left;
background:pink;
width: 50px;
margin-right: calc((100% - 300px) / 5 - 1px);
}
div:last-child
{
margin-right:0;
}
onde -1px para corrigir um erro de calc / arredondamento do IE9 + - veja aqui
Caso 2: justificando caixas em várias linhas ( FIDDLE )
Aqui, além da calc()
função, media queries
são necessários.
A idéia básica é configurar uma consulta de mídia para cada #columns estados, onde então uso calc () para calcular a margem direita de cada um dos elementos (exceto os da última coluna).
Parece muito trabalho, mas se você estiver usando LESS ou SASS, isso pode ser feito facilmente
(Ainda pode ser feito com css regular, mas você terá que fazer todos os cálculos manualmente e, se alterar a largura da caixa - precisará resolver tudo novamente)
Abaixo está um exemplo usando LESS: (Você pode copiar / colar este código aqui para brincar com ele, [é também o código que eu usei para gerar o violino mencionado acima])
@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;
}
}
Então, basicamente, você primeiro precisa decidir a largura da caixa e a margem mínima que deseja entre as caixas.
Com isso, você pode descobrir quanto espaço precisa para cada estado.
Em seguida, use calc () para calcular a margem direita e enésimo filho para remover a margem direita das caixas na coluna final.
A vantagem desta resposta sobre a resposta aceita text-align:justify
é que, quando você tem mais de uma linha de caixas - as caixas na linha final não são "justificadas", por exemplo: Se houver duas caixas na linha final - I não queira que a primeira caixa fique à esquerda e a próxima à direita - mas que as caixas se sigam em ordem.
Sobre o suporte ao navegador : Isso funcionará no IE9 +, Firefox, Chrome, Safari6.0 + - (veja aqui para mais detalhes) No entanto, notei que no IE9 + há um pouco de falha entre os estados de consulta de mídia. [se alguém souber como consertar isso, eu realmente gostaria de saber :)] <- CORRIGIDO AQUI
display:inline-block;
vez de flutuar?