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

370

Considere el siguiente código :

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}
<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>
Expandir fragmento

Me gustaría que los dos divs estén uno al lado del otro dentro del envoltorio div. En este caso, la altura del div verde debería determinar la altura del envoltorio.

¿Cómo podría lograr esto a través de CSS?

css html Misha Moroshko
fuente
55
También: stackoverflow.com/questions/446060/…
radek
14
#wrapper { display: flex; }
icl7126
Posible duplicado de CSS dos divs uno al lado del otro
Alexander

Respuestas:

447

Flota uno o ambos divs internos.

Flotando un div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

o si flota ambos, necesitará alentar a la envoltura div para que contenga a los dos niños flotantes, o pensará que está vacía y no colocará el borde alrededor de ellos

Flotando ambos divs:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}
clairesuzy
fuente
2
podría establecer overflow:autoen el #wrapper Para que el tamaño aún se adapte al tamaño del contenido. (Sin la necesidad de un elemento claro: ambos)
meo
sí, en el ejemplo uno, si el #primero es más largo, ciertamente podría - con flotadores 101 eh;) .. el desbordamiento oculto en el #segundo evita la necesidad de calcular un margen izquierdo, aunque de lo contrario las soluciones son básicamente las mismas
clairesuzy
3
¡Exactamente! No quiero calcular el margen. overflow: hiddenhace un gran trabajo aquí! Sin embargo, todavía es un poco mágico para mí. Pensé que overflow: hiddendebería ocultar el contenido si no encaja en su contenedor. Pero, aquí el comportamiento es un poco diferente. ¿Podría dar más detalles sobre eso, por favor?
Misha Moroshko
44
la overflowpropiedad borrará los flotadores tanto verticales como horizontales, razón por la cual en mi primer ejemplo, #secondno necesita un margen izquierdo, la propiedad de desbordamiento funciona siempre que su valor no lo sea visible. Prefiero oculto a automático para aquellos por si acaso una barra de desplazamiento no se genera por accidente (lo que hará automáticamente) ... de cualquier manera no habrá contenido oculto en un escenario como este, ya que solo se ocultará si sale de su ancho de 500 px, pero siempre que no haya contenido de altura envolver dentro del ancho de forma normal ... sin esconderse;)
clairesuzy
1
desbordamiento: oculto en el #wrapper sirve para contener el primer flotador verticalmente en caso de que se alargue más que el #segundo no flotante. el segundo desbordamiento en #segundo sirve para contener el contenido al lado del primer flotador, horizontalmente de lo contrario iría debajo del primer flotador. El comportamiento extendido de la propiedad de desbordamiento se introdujo gradualmente en algún lugar de CSS2.1, las especificaciones en sí mismas cambiaron en respuesta a una forma de contener flotantes sin un elemento de limpieza o un hack de clearfix, su término técnico es que cuando se usa así crea un nuevo contexto de formato de bloque
clairesuzy
130

Teniendo dos divs,

<div id="div1">The two divs are</div>
<div id="div2">next to each other.</div>

También puedes usar la displaypropiedad:

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

Ejemplo de jsFiddle aquí .

Si div1excede una cierta altura, div2se colocará junto a div1la parte inferior. Para resolver esto, use vertical-align:top;en div2.

Ejemplo de jsFiddle aquí .

jim_kastrin
fuente
@BSeven, la respuesta aceptada utiliza la propiedad float, que los navegadores principales admitían antes que la propiedad display. Chrome admite flotación desde v1.0 y visualización desde v4.0. Quizás la respuesta aceptada era más compatible con versiones anteriores en el momento en que se escribió.
jim_kastrin
55
Esta solución tiene un problema molesto: ya que se divcrean s, inlineno debe mantener espacios, nuevas líneas, etc. entre ellos en su HTML. De lo contrario, los navegadores generarán un espacio entre ellos. Vea este violín : no puede mantener ambos divs en la misma línea a menos que coloque sus etiquetas sin nada en el medio.
Alexander Abakumov
30

Puede sentar elementos uno al lado del otro utilizando la propiedad flotante CSS:

#first {
float: left;
}
#second {
float: left;
}

Debería asegurarse de que el contenedor wrap div permita la flotación en términos de ancho, y que los márgenes, etc. estén configurados correctamente.

James
fuente
17

Intenta usar el modelo flexbox. Es fácil y corto de escribir.

En Vivo Jsfiddle en

CSS:

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

la dirección predeterminada es fila. Entonces, se alinea uno al lado del otro dentro del #wrapper. Pero no es compatible con IE9 o menos que esas versiones

MD Rafee
fuente
1
No puedo creer lo fácil que es usarlo flex. ¡Gracias!
Sam
16

Aquí está la solución:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
}
#first {
    float: left;
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    margin: 0 0 0 302px; /* considering the border you need to use a margin so the content does not float under the first div*/
}

su demo actualizada;

http://jsfiddle.net/dqC8t/1/

meo
fuente
Gracias. Si lo omito overflow: auto;, todavía funciona. ¿Podría dar un ejemplo donde se requiere?
Misha Moroshko
sí claro: elimine el desbordamiento automático y haga que el contenido del primero sea más largo que el contenido del segundo, verá bien que el tamaño del contenedor solo se adapta, cuando configura el desbordamiento automático, o si usa un elemento de limpieza: jsfiddle. net / dqC8t / 3
meo
OK, ya veo, gracias! Sin embargo, no me gustó margin: 0 0 0 302px;porque depende width: 300px;. ¡¡Pero gracias de cualquier manera!!
Misha Moroshko
no lo necesita si especifica i ancho para su segundo div
meo
15

Opción 1

Usar float:leften ambosdivelementos y establezca un ancho% para ambos elementos div con un ancho total combinado de 100%.

Utilizar box-sizing: border-box; en los elementos div flotantes. El valor border-box fuerza el relleno y los bordes al ancho y alto en lugar de expandirlo.

Use clearfix en el <div id="wrapper">para borrar los elementos secundarios flotantes que harán que la escala div del envoltorio tenga la altura correcta.

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

http://jsfiddle.net/dqC8t/3381/

opcion 2

Utilizar position:absolute en un elemento y un ancho fijo en el otro elemento.

Agregar posición: relativo al <div id="wrapper">elemento para que los elementos secundarios se posicionen absolutamente en el <div id="wrapper">elemento.

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}
#first {
    border: 1px solid red;
    width:100px;
}
#second {
    border: 1px solid green;
    position:absolute;
    top:0;
    left:100px;
    right:0;
}

http://jsfiddle.net/dqC8t/3382/

Opción 3

Úselo display:inline-blocken ambos divelementos y establezca un ancho% para ambos elementos div con un ancho total combinado de 100%.

Y de nuevo (igual que float:left ejemplo) use box-sizing: border-box;en los elementos div. El valor border-box fuerza el relleno y los bordes al ancho y alto en lugar de expandirlo.

NOTA: los elementos de bloque en línea pueden tener problemas de espacio ya que se ven afectados por los espacios en el marcado HTML. Más información aquí: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}

#first {
    width:50%;
    border: 1px solid red;
    display:inline-block;
}

#second {
    width:50%;
    border: 1px solid green;
    display:inline-block;
}

http://jsfiddle.net/dqC8t/3383/

Una opción final sería usar la nueva opción de visualización llamada flex, pero tenga en cuenta que la compatibilidad del navegador podría entrar en juego:

http://caniuse.com/#feat=flexbox

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Jako Basson
fuente
1
Convenido; floatNo flotes mi bote. inline-blockrocas (Lo siento)
SteveCinq
7

Trate de usar los siguientes cambios de código para colocar dos divs uno frente al otro 

#wrapper {
  width: 500px;
  border: 1px solid black;
  display:flex;
}

Enlace JSFiddle

Shailesh
fuente
7

Es muy fácil, puedes hacerlo de la manera difícil

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}
<div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>
Expandir fragmento

o la manera fácil 

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}
<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>
Expandir fragmento

También hay un millón de otras formas.
Pero lo haría con la manera fácil. También me gustaría decirle que muchas de las respuestas aquí son incorrectas, pero ambas formas que he mostrado al menos funcionan en HTML 5.

Runningman Studios
fuente
5

Esta es la respuesta correcta de CSS3. Espero que esto te ayude de alguna manera ahora: D Realmente te recomiendo que leas el libro: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 En realidad, he hecho esta solución al leer este libro ahora . :RE

#wrapper{
  display: flex;
  flex-direction: row;
  border: 1px solid black;
}
#first{
  width: 300px;
  border: 1px solid red;
}
#second{
  border: 1px solid green;
}
<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>
Expandir fragmento

Martin Krajčírovič
fuente
3

  1. Agregar float:left;propiedad en ambos divs.

  2. Añadir display:inline-block;propiedad.

  3. Añadir display:flex;propiedad en padre div.

Amigo
fuente
2

Mi acercamiento:

<div class="left">Left</div>
<div class="right">Right</div>

CSS:

.left {
    float: left;
    width: calc(100% - 200px);
    background: green;
}

.right {
    float: right;
    width: 200px;
    background: yellow;
}
sNICkerssss
fuente
0 

#wrapper {
width: 1200;
border: 1px solid black;
position: relative;
float: left;
}
#first {
width: 300px;
border: 1px solid red;
position: relative;
float: left;
}
#second {
border: 1px solid green;
position: relative;
float: left;
width: 500px;
}
<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>
Expandir fragmento

Akshit Ahuja
fuente
0

En material UI y react.js puedes usar la grilla

<Grid
  container
  direction="row"
  justify="center"
  alignItems="center"
>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>

</Grid>
Pedro JR
fuente