CSS layout - Aligner deux divs côte à côte

Question

CSS layout - Aligner deux divs côte à côte

Demandé el 26 de Avril, 2010: Quand la question a-t-elle été
91603 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Cette question a déjà des réponses:

Aligner
éléments côte à côte (2 réponses )

J'ai un petit problème. Je suis en train d'aligner deux divs côte à côte à l'aide de CSS, cependant, je voudrais que le centre de div à être positionné à l'horizontale centrale dans la page, j'ai réalisé cela en utilisant:

#page-wrap { margin 0 auto; }

Thats a bien fonctionné. La deuxième div je voudrais positionné sur le côté gauche de la page centrale écharpe mais je n'arrive pas à le faire à l'aide de flotteurs bien que je suis sûr que c'est possible.

Peut-être de son mieux pour montrer l'exemple de ce que je viens de décrire:

Layout Problem

Je voudrais pousser le rouge div côtés de le blanc-div.

Voici mon CSS concernant ces deux divs, barre latérale étant le rouge div et page-wrap étant le blanc div:

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

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

Toute aide serait appréciée.

Demandé el 26 de Avril, 2010 par Ronnie

Answer 1

5 Réponses

Answer 2

81voto

Nick Craver Points 313913

Si vous avez enveloppé vos vrd, 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 look légèrement différent, donc je ne suis pas sûr que c'est ce que vous êtes après. Ce serait le centre de tous les 800px comme une unité, et non pas l' 600px centré avec l' 200px sur le côté gauche. L'approche de base est de votre barre latérale de la flotte à gauche, mais à l'intérieur de la div principale, et l' #page-wrap a la largeur de la barre latérale que c'est de la marge de gauche pour déplacer le plus loin possible.

Mise à jour basée sur les commentaires: Pour cette décentré look, 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;
}

Répondu el 26 de Avril, 2010 par Nick Craver (313913 Points )

Answer 3

19voto

Mr. Alien Points 60232

Je ne comprends pas pourquoi Nick est à l'aide de margin-left: 200px; au lieu flottante les autres div de la left ou right, j'ai juste modifié son balisage, vous pouvez utiliser float pour ces deux éléments au lieu d'utiliser 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: "";
}

Aussi, j'ai utilisé .clear:after qui suis d'appel sur l'élément parent, juste pour soi effacer la mémoire.

Répondu el 30 de Août, 2013 par Mr. Alien (60232 Points )

Answer 4

11voto

Drua Points 69

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:

entrez la description de l'image ici

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

Répondu el 18 de Mars, 2014 par Drua (69 Points )

Answer 5

2voto

matharden Points 56

Il est également possible de le faire sans le wrapper - div#main. Vous pouvez centre de la #page-wrap utilisant le margin: 0 auto; méthode, puis utilisez la gauche:-n; méthode de la position de la #sidebar et l'ajout de 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;
    }

Cependant, la barre latérale disparaîtrait au-delà de la fenêtre d'affichage du navigateur si la fenêtre est plus petite que le contenu.

Nick deuxième réponse est la meilleure, parce que c'est aussi plus facile à gérer que vous n'avez pas à ajuster #sidebar si vous souhaitez redimensionner #page-wrap.

Répondu el 26 de Avril, 2010 par matharden (56 Points )

Answer 6

1voto

Michael Herold Points 574

La méthode la plus simple consisterait à les envelopper dans un container div et à appliquer margin: 0 auto; au conteneur. Cela centrera à la fois les divs #page-wrap et #sidebar sur la page. Toutefois, si vous souhaitez une apparence décentrée, vous pouvez alors décaler le container 200px vers la gauche, pour tenir compte de la largeur du div. #sidebar .

Répondu el 26 de Avril, 2010 par Michael Herold (574 Points )

CSS layout - Aligner deux divs côte à côte

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

CSS layout - Aligner deux divs côte à côte

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: