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

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

float:leftPropriedade do usuário na classe div filha

verifique a estrutura div em detalhes: http://www.dzone.com/links/r/div_table.html

— Pranay Rana
fonte

2

Usando o flexbox

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

— dasfdsa
fonte