web-dev-qa-db-fra.com

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

Considérons 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>

J'aimerais que les deux divs soient côte à côte à l'intérieur de la div d'emballage. Dans ce cas, la hauteur de la div verte devrait déterminer la hauteur de l'emballage.

Comment pourrais-je atteindre cela via CSS?

csshtml
299
Misha Moroshko

Flottez un ou les deux divs intérieurs.

Flottant une 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 la division wrapper à contenir les deux enfants flottés, sinon elle va penser qu'elle est vide et ne pas entourer la bordure

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

Avoir deux divs,

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

vous pouvez également utiliser la propriété display:

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

exemple jsFiddle ici .

Si div1 dépasse une certaine hauteur, div2 sera placé à côté de div1 en bas. Pour résoudre ce problème, utilisez vertical-align:top; sur div2.

exemple jsFiddle ici .

102
jim_kastrin

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 la div de l'emballage permet le flottement en termes de largeur, et que les marges, etc. sont définies correctement.

28
James

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/

16
meo

Option 1

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

Utilisez 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 permettra au diviseur de s’adapter à la hauteur voulue.

.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

Utilisez position:absolute sur un élément et une largeur fixe sur l'autre élément.

Ajouter position: par rapport à l'élément <div id="wrapper"> pour que les éléments enfants soient absolument positionnés par rapport à l'élément <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/

Option 3

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

Et encore (idem float:left exemple), utilisez 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.

NOTE: Les éléments inline-block 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 consisterait à utiliser la nouvelle option d’affichage nommée flex, mais notez que la compatibilité du navigateur peut entrer en jeu:

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

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

14
Jako Basson

Essayez d'utiliser le modèle flexbox. C'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 row. Donc, il s'aligne les uns à côté des autres à l'intérieur de #wrapper . Mais il n'est pas supporté par IE9 ou moins que les versions

13
Md. Rafee

Essayez d'utiliser les modifications de code ci-dessous pour placer deux divs l'un devant l'autre 

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

lien JSFiddle

6
Shailesh

  1. Ajouter la propriété float:left; dans les deux divs.

  2. Ajoutez la propriété display:inline-block;. 

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

3
Friend

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 le moyen facile 

#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 comme un million d'autres moyens.
Mais je voudrais simplement avec le moyen facile .. Je voudrais également vous dire que beaucoup de réponses ici sont incorrectes Mais les deux manières que j’ai montrées au moins fonctionnent en HTML 5.

1
Runningman Studios

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

0
Akshit Ahuja

C'est la bonne réponse CSS3. J'espère que cela vous aidera d'une manière ou d'une autre maintenant: D. Je vous recommande vivement de lire le livre: https://www.Amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 en fait, j'ai fait cette solution de lire 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>

0
Martin Krajčírovič