Como colocar esses dois divs lado a lado?

110

Tenho dois divs que não estão aninhados, um abaixo do outro. Ambos estão dentro de um div pai e este div pai se repete. Então, essencialmente:

<div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

Eu quero ficar cada par de child_div_1e child_div_2ao lado do outro. Como posso fazer isso?

css layout html Justin Meltzer
fonte

Respostas:

82 
#parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

Verifique o exemplo de trabalho em http://jsfiddle.net/c6242/1/

Hussein
fonte
1
Ele quer os filhos div alinhados um ao lado do outro, não os pais (pelo menos foi o que eu entendi ...)
ehdv
4
Ainda acho display: table-cellque obterá resultados mais próximos do que ele quer dizer (já que então eles terão a mesma altura etc.), mas dessa forma certamente funcionará.
ehdv
@ehdv display: table-cellnão é compatível com o IE6 IE7. flutuar: esquerda; é a maneira correta de fazer isso.
Hussein,
Na verdade, a maneira correta de fazer isso no IE6,7 é com <tr><td>, porque qualquer outra opção será quebrada quando o usuário redimensionar a janela. Em navegadores modernos, display: inline-blockgeralmente é a melhor opção.
John Henckel
126

Uma vez que div's por padrão são blockelementos - o que significa que ocuparão toda a largura disponível, tente usar -

display:inline-block;

O divagora é renderizado em linha, isto é, não interrompe o fluxo de elementos, mas ainda será tratado como um elemento de bloco.

Acho essa técnica mais fácil do que lutar com floats.

Veja este tutorial para mais - http://learnlayout.com/inline-block.html . Eu recomendaria até os artigos anteriores que levaram a esse. (Não, eu não escrevi)

Robin Maben
fonte
Gostei muito dessa solução. Meu único problema com isso é que alinha a parte inferior de ambos os divs em vez de alinhar a parte superior. Existe uma configuração rápida para isso também?
Chris
Eu sugeriria o uso de 2 invólucros de divaltura igual para que o conteúdo dentro deles parecesse estar alinhado no topo.
Robin Maben de
2
Concordo. Isso é muito melhor do que float:leftporque oferece muito mais opções sem redefinir todo o layout. As coisas "simplesmente funcionam" dessa maneira. Confira aqui: jsfiddle.net/SrAQd/4
Jerry
12
Para obter o alinhamento vertical, adicionaria "vertical-align: top;"
cdiggins
@Chris: Sim, concordo com cdiggins. Isso deve ajudá-lo.
Robin Maben
44

Achei o código abaixo muito útil, ele pode ajudar qualquer pessoa que vier pesquisar aqui

<html>
<body>
    <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
    <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
    <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>
Expandir snippet

machados
fonte
11

Usar o flexbox é super simples!

#parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;
}

Exemplo de violino

Sol
fonte
6

Usando o estilo

.child_div_1 {
    float:left
}
amit_g
fonte
5

Melhor que funcione para mim:

 .left{
   width:140px;
   float:left;
   height:100%;
 }

 .right{
   margin-left:140px;
 }


http://jsfiddle.net/jiantongc/7uVNN/

Jiantongc
fonte
2

Usando o flexbox

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }
dasfdsa
fonte