¿Cómo conseguir estos dos divs uno al lado del otro?

110

Tengo dos divs que no están anidados, uno debajo del otro. Ambos están dentro de un div padre, y este div padre se repite. Así que esencialmente:

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

Quiero tener cada par de child_div_1y child_div_2uno al lado del otro. ¿Cómo puedo hacer esto?

css layout html Justin Meltzer
fuente

Respuestas:

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;
}

Consulte el ejemplo de trabajo en http://jsfiddle.net/c6242/1/

Hussein
fuente
1
Quiere que los niños div alineados uno al lado del otro, no los padres (al menos eso fue lo que yo entendí ...)
ehdv
4
Sigo pensando display: table-cellque obtendré resultados más cercanos a lo que él quiere decir (desde entonces tendrán la misma altura, etcétera) pero de esta manera ciertamente funcionará.
ehdv
@ehdv display: table-cellno es compatible con IE6 IE7. flotador izquierdo; es la forma correcta de hacer esto.
Hussein
En realidad, la forma correcta de hacer esto en IE6,7 es con <tr><td>, porque cualquier otra opción se romperá cuando el usuario cambie el tamaño de la ventana. En los navegadores modernos, display: inline-blocksuele ser la mejor opción.
John Henckel
126

Dado que los div por defecto son blockelementos, lo que significa que ocuparán todo el ancho disponible, intente usar -

display:inline-block;

El divahora se representa en línea, es decir, no interrumpe el flujo de elementos, pero seguirá siendo tratado como un elemento de bloque.

Encuentro esta técnica más fácil que luchar con floats.

Consulte este tutorial para obtener más información: http://learnlayout.com/inline-block.html . Recomendaría incluso los artículos anteriores que conducen a ese. (No, yo no lo escribí)

Robin Maben
fuente
Realmente me gustó esta solución. Mi único problema es que alinea la parte inferior de ambos divs en lugar de alinear la parte superior. ¿También hay una configuración rápida para esto?
Chris
Sugeriría usar 2 envoltorios que divtengan la misma altura para que el contenido dentro de ellos parezca estar alineado en la parte superior.
Robin Maben
2
Estoy de acuerdo. Esto es mucho mejor que float:leftporque le brinda muchas más opciones sin redefinir todo su diseño. Las cosas "simplemente funcionan" de esta manera. Compruébelo aquí: jsfiddle.net/SrAQd/4
Jerry
12
Para obtener la alineación vertical, agregaría "vertical-align: top;"
cdiggins
@Chris: Sí, estoy de acuerdo con cdiggins. Eso debería ayudarte.
Robin Maben
44

Encontré el siguiente código muy útil, podría ayudar a cualquiera que venga a buscar aquí

<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 fragmento

hachas
fuente
11

¡Usar flexbox es súper simple!

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

Ejemplo de violín

Sol
fuente
6

Usando el estilo

.child_div_1 {
    float:left
}
amit_g
fuente
2

Usando flexbox

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