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

poner un div al lado de otro sin float

Question

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>

Me gustaría que los dos divs estuvieran uno al lado del otro dentro del div wrapper. En este caso, la altura del div verde debe determinar la altura de la envoltura.

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

Answer 1

1. Añadir float:left; Propiedad en ambos divs.

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

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

Answer 2

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*/
}

tu demo actualizada;

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

Answer 3

Es muy fácil, podrías hacerlo de la manera más 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"> 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>

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

También hay como un millón de otras formas.
Pero me acabo de la manera fácil. También me gustaría decirles que muchas de las respuestas son incorrectas. Pero las dos formas que he mostrado al menos funcionan en HTML 5.

Answer 4

Esta es la respuesta correcta de CSS3. Espero que esto te ayude de alguna manera ahora: D Realmente te recomiendo leer el libro: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 En realidad, he hecho esta solución leyendo este libro . :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"> 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>

Answer 5

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, deberá alentar a la división del contenedor para que contenga a los dos niños flotantes, o pensará que está vacío y no coloca 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 */
}

Answer 6

Puede colocar elementos uno al lado del otro utilizando la propiedad float de CSS:

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

Necesitará asegurarse de que la división del contenedor permite la flotación en términos de ancho, y los márgenes, etc. están configurados correctamente.

Answer 7

Teniendo dos divs,

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

También puede utilizar la propiedad de display :

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

Ejemplo de jsFiddle here .

Si div1 supera una cierta altura, div2 se colocará junto a div1 en la parte inferior. Para resolver esto, use vertical-align:top; en div2 .

Ejemplo de jsFiddle here .

Answer 8

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

Live Jsfiddle

CSS:

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

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

Answer 9

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

JSFiddle link

Answer 10

Opción 1

Use float:left en ambos elementos div y establezca un% de ancho para ambos elementos div con un ancho total combinado de 100%.

Use box-sizing: border-box; en los elementos div flotantes. El valor cuadro de borde fuerza el relleno y los bordes en el ancho y la altura en lugar de expandirlo.

Use clearfix en <div id="wrapper"> para borrar los elementos secundarios flotantes que harán que la división div del wrapper alcance 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

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

Agregue position: relativo al elemento <div id="wrapper"> para hacer que los elementos secundarios se posicionen absolutamente respecto del elemento <div id="wrapper"> .

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

Opcion 3

Use display:inline-block en ambos elementos div y establezca un% de ancho para ambos elementos div con un ancho total combinado de 100%.

Y nuevamente (igual que en el ejemplo de float:left ) use box-sizing: border-box; en los elementos div. El valor cuadro de borde fuerza el relleno y los bordes en el ancho y la altura en lugar de expandirlo.

NOTA: los elementos de bloque en línea pueden tener problemas de espaciado, ya que se ven afectados por 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 denominada flex, pero tenga en cuenta que la compatibilidad con el navegador podría ser útil:

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

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

Answer 11

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