web-dev-qa-db-fra.com

Aligner deux divs côte à côte

J'ai un petit problème. J'essaie d'aligner deux divs côte à côte à l'aide de CSS. Toutefois, j'aimerais que le centre de la division soit placé horizontalement au centre de la page. Pour ce faire, j'ai utilisé:

#page-wrap { margin 0 auto; }

Cela a bien fonctionné. La deuxième div que je voudrais positionner sur le côté gauche de la page centrale, mais je ne parviens pas à le faire en utilisant des flottants bien que je suis sûr que cela est possible.

Je voudrais pousser la division rouge à côté de la div blanche.

Voici mon CSS actuel concernant ces deux divs, la barre latérale étant le div rouge et le retour à la page étant le div blanc:

#sidebar {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap {
    margin: 0 auto;
    width: 600px;
    background: #ffffff;
    height: 400px;
}
csscss3css-float
45
Ronnie

Si vous avez emballé vos divs, comme ceci:

<div id="main">
  <div id="sidebar"></div>
  <div id="page-wrap"></div>
</div>

Vous pouvez utiliser ce style:

#main { 
    width: 800px;
    margin: 0 auto;
}
#sidebar    {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin-left: 200px;
}

C'est un peu différent cependant, donc je ne suis pas sûr que c'est ce que vous recherchez. Cela centrerait tous les 800px en tant qu'unité, pas le 600px centré avec le 200px sur le côté gauche. L’approche de base est que votre barre latérale flotte à gauche, mais à l’intérieur de la division principale, et le #page-wrap a la largeur de votre barre latérale, car sa marge gauche vous permet de vous déplacer aussi loin.

Mise à jour basée sur les commentaires: Pour ce look excentré, vous pouvez faire ceci:

<div id="page-wrap">
  <div id="sidebar"></div>
</div>

Avec ce style:

#sidebar    {
    position: absolute;
    left: -200px;
    width: 200px;
    height: 400px;
    background: red;    
}

#page-wrap  {
    position: relative;
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin: 0 auto;
}
74
Nick Craver

Je ne comprends pas pourquoi Nick utilise margin-left: 200px; _ au lieu de laisser flotter l'autre div au left ou right, je viens de peaufiner son balisage, vous pouvez utiliser float pour les deux éléments d'utilisation margin-left.

Démo 

#main {
    margin: auto;
    width: 400px;
}

#sidebar    {
    width: 100px;
    min-height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 300px;
    background: #0f0;
    min-height: 400px;
    float: left;
}

.clear:after {
    clear: both;
    display: table;
    content: "";
}

De plus, j'ai utilisé .clear:after qui appelle l’élément parent, juste pour effacer le parent.

15
Mr. Alien

Cela peut être fait par Style Property.

<!DOCTYPE html>
<html>
<head>
<style> 
#main {

  display: flex;
}

#main div {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">Red DIV</div>
  <div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>

</body>
</html>

Son résultat sera:

enter image description here

Enjoy ... S'il vous plaît Note: Cela fonctionne dans la version supérieure de CSS (> 3.0).

7
Mark Macneil Bikeio

Le code HTML est pour trois div aligner côte à côte et peut être utilisé pour deux aussi par certains changements

<div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
</div>

Le CSS sera

#wrapper {
  display:table;
  width:100%;
}
#row {
  display:table-row;
}
#first {
  display:table-cell;
  background-color:red;
  width:33%;
}
#second {
  display:table-cell;
  background-color:blue;
  width:33%;
}
#third {
  display:table-cell;
  background-color:#bada55;
  width:34%;
}

Ce code fonctionnera vers une mise en page réactive car il redimensionnera la

<div>

en fonction de la largeur de l'appareil. Même on peut faire taire n'importe qui

<div>

comme

<!--<div id="third">third</div> -->

et peut utiliser le repos deux pour deux

<div>

cote à cote.

3
Dr Amit Sehgal

Il est également possible de faire cela sans le wrapper - div # main. Vous pouvez centrer le saut de page # en utilisant la marge: 0 auto; méthode puis utilisez la gauche: -n; méthode pour positionner la barre latérale et ajouter la largeur de # page-wrap.

body { background: black; }
#sidebar    {
    position: absolute;
    left: 50%;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -230px;
    }

#page-wrap  {
    width: 60px;
    background: #fff;
    height: 400px;
    margin: 0 auto;
    }

Toutefois, la barre latérale disparaîtrait au-delà de la fenêtre du navigateur si la fenêtre était plus petite que le contenu.

La deuxième réponse de Nick est préférable, car elle est également plus facile à gérer, car vous n'avez pas à ajuster #sidebar si vous souhaitez redimensionner # page-wrap.

2
matharden

La méthode la plus simple serait de les envelopper dans un container div et appliquez margin: 0 auto; au conteneur. Ceci centrera à la fois le #page-wrap et le #sidebar divs sur la page. Cependant, si vous voulez un look décentré, vous pouvez alors décaler le container200px à gauche, pour prendre en compte la largeur du #sidebar div.

1
Michael Herold