¿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

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

5

Lo mejor que funciona para mí:

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

 .right{
   margin-left:140px;
 }

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

— jiantongc
fuente

2

float:leftPropiedad de usuario en la clase div secundaria

verifique la estructura div en detalle: http://www.dzone.com/links/r/div_table.html

— Pranay Rana
fuente

2

Usando flexbox

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

— dasfdsa
fuente