Comment placer deux div à côté de l'autre?

Considérez le code suivant :

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

Je voudrais que les deux divs soient côte à côte à l'intérieur du div wrapper. Dans ce cas, la hauteur du div vert doit déterminer la hauteur de l'emballage.

Comment pourrais-je y parvenir via CSS?

Faites flotter une ou les deux divisions internes.

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

ou si vous flottez les deux, vous devrez encourager le div wrapper à contenir les deux enfants flottants, ou il pensera qu'il est vide et ne mettra pas la bordure autour d'eux

Flottant les deux 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 */
}

Ayant deux divs,

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

vous pouvez également utiliser la displaypropriété:

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

Exemple jsFiddle ici .

Si div1dépasse une certaine hauteur, div2sera placé à côté en div1bas. Pour résoudre ce problème, utilisez vertical-align:top;sur div2.

Exemple jsFiddle ici .

Vous pouvez placer les éléments les uns à côté des autres en utilisant la propriété CSS float:

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

Vous devez vous assurer que le div wrapper permet le flottement en termes de largeur et que les marges, etc. sont définies correctement.

Essayez d'utiliser le modèle flexbox. Il est facile et court à écrire.

Live Jsfiddle

CSS:

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

la direction par défaut est la ligne. Ainsi, il s'aligne les uns à côté des autres à l'intérieur du #wrapper. Mais il n'est pas pris en charge IE9 ou moins que ces versions

voici la solution:

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

votre démo mise à jour;

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

Option 1

Utilisez float:leftsur les deux divéléments et définissez un% de largeur pour les deux éléments div avec une largeur totale combinée de 100%.

Utiliser box-sizing: border-box;sur les éléments div flottants. La valeur border-box force le remplissage et les bordures dans la largeur et la hauteur au lieu de les agrandir.

Utilisez clearfix sur le <div id="wrapper">pour effacer les éléments enfants flottants, ce qui rendra l'échelle div du wrapper à la hauteur correcte.

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

Option 2

Utiliser position:absolutesur un élément et une largeur fixe sur l'autre élément.

Ajouter une position: relative à l' <div id="wrapper">élément pour que les éléments enfants se positionnent absolument sur l' <div id="wrapper">élément.

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

Option 3

Utilisez display:inline-blocksur les deux divéléments et définissez un% de largeur pour les deux éléments div avec une largeur totale combinée de 100%.

Et encore (même que l' float:leftexemple) utiliser box-sizing: border-box;sur les éléments div. La valeur border-box force le remplissage et les bordures dans la largeur et la hauteur au lieu de les agrandir.

REMARQUE: les éléments de bloc en ligne peuvent avoir des problèmes d'espacement car ils sont affectés par les espaces dans le balisage HTML. Plus d'informations ici: 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/

Une dernière option serait d'utiliser la nouvelle option d'affichage nommée flex, mais notez que la compatibilité du navigateur pourrait entrer en jeu:

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

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

Essayez d'utiliser les modifications de code ci-dessous pour placer deux divisions l'une en face de l'autre

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

Lien JSFiddle

C'est très facile - vous pouvez le faire à la dure

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

ou la manière simple

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

Il y a aussi un million d'autres façons.
Mais je le ferais simplement avec la facilité. Je voudrais également vous dire que beaucoup de réponses ici sont incorrectes, mais les deux façons dont j'ai montré au moins fonctionnent en HTML 5.

C'est la bonne réponse CSS3. J'espère que cela vous aide en quelque sorte maintenant: D Je vous recommande vraiment de lire le livre: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 En fait, j'ai fait cette solution en lisant ce livre maintenant . :RÉ

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

1. Ajoutez une float:left;propriété dans les deux divisions.

2. Ajouter une display:inline-block;propriété.

3. Ajouter une display:flex;propriété dans la div parent.

Mon approche:

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

Dans l'interface utilisateur matérielle et react.js, vous pouvez utiliser la grille

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