Largura do fluido com DIVs igualmente espaçados

Eu tenho um DIV de largura de fluido.

Dentro deste eu tenho 4 DIVs todos os 300px x 250px ...

<div id="container">
   <div class="box1"> </div>
   <div class="box2"> </div>
   <div class="box3"> </div>
   <div class="box4"> </div>
</div>

O que eu quero que aconteça é a caixa 1 ser lançada à esquerda, a caixa 4 ser lançada à direita e as caixas 2 e 3 espaçadas igualmente entre elas. Quero que o espaçamento seja fluido também, para que o navegador fique menor, o espaço também fique menor.

Veja: http://jsfiddle.net/thirtydot/EDp8R/

• Isso funciona no IE6 + e em todos os navegadores modernos!
• Reduzimos pela metade as dimensões solicitadas apenas para facilitar o trabalho.
• text-align: justifycombinado com o .stretchque está lidando com o posicionamento.
• display:inline-block; *display:inline; zoom:1correções inline-blockpara o IE6 / 7, veja aqui .
• font-size: 0; line-height: 0 corrige um pequeno problema no IE6.

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  /* just for demo */
  min-width: 612px;
}

.box1,
.box2,
.box3,
.box4 {
  width: 150px;
  height: 125px;
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1
}

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

.box1,
.box3 {
  background: #ccc
}

.box2,
.box4 {
  background: #0ff
}

<div id="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <span class="stretch"></span>
</div>

O extra span( .stretch) pode ser substituído por :after.

Isso ainda funciona nos mesmos navegadores que a solução acima. :afternão funciona no IE6 / 7, mas eles estão usando de distribute-all-linesqualquer maneira, por isso não importa.

Veja: http://jsfiddle.net/thirtydot/EDp8R/3/

Há uma pequena desvantagem :after: para que a última linha funcione perfeitamente no Safari, você deve ter cuidado com o espaço em branco no HTML.

Especificamente, isso não funciona:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div>
</div>

E isso faz:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div></div>

Você pode usar isso para qualquer número arbitrário de filhos divsem adicionar uma boxNclasse a cada um, alterando

.box1, .box2, .box3, .box4 { ...

para

#container > div { ...

Isso seleciona qualquer div que seja o primeiro filho da #containerdiv e nenhuma outra abaixo dela. Para generalizar as cores de segundo plano, você pode usar o seletor de ordem n de CSS3 , embora ele seja suportado apenas no IE9 + e em outros navegadores modernos:

.box1, .box3 { ...

torna-se:

#container > div:nth-child(odd) { ...

Veja aqui um exemplo do jsfiddle.

A maneira mais fácil de fazer isso agora é com um flexbox:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

O CSS é simplesmente:

#container {
    display: flex;
    justify-content: space-between;
}

demo: http://jsfiddle.net/QPrk3/

No entanto , atualmente isso é suportado apenas por navegadores relativamente recentes ( http://caniuse.com/flexbox ). Além disso, as especificações para o layout do flexbox foram alteradas algumas vezes, portanto, é possível cobrir mais navegadores incluindo uma sintaxe mais antiga:

http://css-tricks.com/old-flexbox-and-new-flexbox/

http://css-tricks.com/using-flexbox/

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 queriessã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

Outras postagens mencionaram flexbox , mas se mais de uma linha de itens for necessária , a space-betweenpropriedade da flexbox falhará (consulte o final da postagem)

Até o momento, a única solução limpa para isso é com o

Módulo de layout de grade CSS ( demo do Codepen )

Basicamente, o código relevante necessário se resume a isso:

ul {
  display: grid; /* (1) */
  grid-template-columns: repeat(auto-fit, 120px); /* (2) */
  grid-gap: 1rem; /* (3) */
  justify-content: space-between; /* (4) */
  align-content: flex-start; /* (5) */
}

1) Faça do elemento container um container grid

2) Defina a grade com uma quantidade 'automática' de colunas - conforme necessário. Isso é feito para layouts responsivos. A largura de cada coluna será 120 px. (Observe o uso de auto-fit(como oposto a auto-fill) que (para um layout de 1 linha) reduz as faixas vazias para 0 - permitindo que os itens se expandam para ocupar o espaço restante. (Confira esta demonstração para ver do que estou falando) )).

3) Defina as lacunas / calhas para as linhas e colunas da grade - aqui, como deseja um layout de 'espaço entre elas' - a lacuna será realmente uma lacuna mínima, pois aumentará conforme necessário.

4) e 5) - Similar ao flexbox.

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, 120px);
  grid-gap: 1rem;
  justify-content: space-between;
  align-content: flex-start;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
}
li {
  background: tomato;
  height: 120px;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Demonstração Codepen (Redimensione para ver o efeito)

Suporte do navegador - Caniuse

Atualmente suportado pelo Chrome (Blink), Firefox, Safari e Edge! ... com suporte parcial do IE (veja este post de Rachel Andrew)

NB:

A space-betweenpropriedade do Flexbox funciona muito bem para uma linha de itens, mas quando aplicada a um contêiner flexível que envolve seus itens - (com flex-wrap: wrap) - falha, porque você não tem controle sobre o alinhamento da última linha de itens; a última linha sempre será justificada (geralmente não é o que você deseja)

Para demonstrar:

body {
  margin: 0;
}
ul {
  
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
  
}
li {
  background: tomato;
  width: 110px;
  height: 80px;
  margin-bottom: 1rem;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepen (redimensione para ver do que estou falando)

Leitura adicional em grades CSS:

• MDN
• Jen Simmons - Aprenda grade CSS
• Um guia completo para CSS Grid | Referência CSS de Codrops
• Um guia completo para grade - CSS Tricks

Isso funcionou para mim com 5 imagens em tamanhos diferentes.

1. Criar uma div de contêiner
2. Uma lista não ordenada para as imagens
3. No css, o desordenado deve ser exibido verticalmente e sem marcadores
4. Justificar o conteúdo da div do contêiner

Isso funciona por causa do justify-content: space-between, e está em uma lista, exibido horizontalmente.

Em CSS

 #container {
            display: flex;
            justify-content: space-between;
 }
    #container ul li{ display:inline; list-style-type:none;
}

Em html

<div id="container"> 
  <ul>  
        <li><img src="box1.png"><li>
        <li><img src="box2.png"><li>
        <li><img src="box3.png"><li>
        <li><img src="box4.png"><li>
        <li><img src="box5.png"><li>
    </ul>
</div>

em jQueryque você pode direcionar o Pai diretamente.

Isso é útil se você não sabe exatamente quantas crianças serão adicionadas dinamicamente ou se você não consegue descobrir seu número.

var tWidth=0;

$('.children').each(function(i,e){
tWidth += $(e).width();

///Example: If the Children have a padding-left of 10px;..
//You could do instead:
tWidth += ($(e).width()+10);

})
$('#parent').css('width',tWidth);

Isso permitirá que parentcresça horizontalmente à medida que childrensão adicionados.

NOTA: Isso pressupõe que o '.children'têm widthe HeightSet

Espero que ajude.

Se você souber o número de elementos por "linha" e a largura do contêiner, poderá usar um seletor para adicionar uma margem aos elementos necessários para causar uma aparência justificada.

Eu tinha linhas de três divs que eu queria justificadas, então usei o:

.tile:nth-child(3n+2) { margin: 0 10px }

isso permite que a div central em cada linha tenha uma margem que força a primeira e a terceira div às bordas externas do contêiner

Também é bom para outras coisas, como bordas de cores de fundo etc.