web-dev-qa-db-fra.com

CSS: Placer les divs à gauche/centre/à droite de l'en-tête

J'ai essayé de créer un site avec la structure suivante:
structure souhaitée http://i50.tinypic.com/vhw076.png

Mais je n'arrive pas à obtenir une tête correcte (e1 à gauche, e2 centré, e3 à droite). Je veux que les trois éléments e1, e2 et e3 soient placés à gauche, au centre et à droite. C'est ce que j'essaye: 

<div id="wrapper">
<div id="header">
    <div id="header-e1">
        1
    </div>
    <div id="header-e2">
        2
    </div>
    <div id="header-e3">
        3
    </div>
</div>
<div id="nav">
    links
</div>
<div id="content">
    content
</div>
<div id="footer">
    footer
</div>
</div>

Avec ce css: 

#wrapper
{
    width: 95%;
    margin: 20px auto;
    border: 1px solid black;
}

#header
{
    margin: 5px;
}
#header-e1
{
    float: left;
    border: 1px solid black;
}
#header-e2
{
    float: left;
    border: 1px solid black;
}
#header-e3
{

    border: 1px solid black;
}

#nav
{
    margin: 5px;
}
#content
{
    margin: 5px;
}
#footer
{
    margin: 5px;
}

Quelqu'un peut-il me donner des conseils sur ce que je peux faire? La structure sera utilisée sur un site Web mobile.

METTRE À JOUR

Le code que j'ai ci-dessus me donne ceci: résultat actuel http://i46.tinypic.com/2mg87ya.png Mais je veux le 2 centré et le 3 du côté droit. Je ne souhaite pas définir la largeur sur un pourcentage, car le contenu des éléments peut varier, ce qui signifie que ce peut être 20/60/20 - 10/80/10 - 33/33/33 ou autre chose.

csshtmlpositioncss-float
20
L42

Utiliser la magie du débordement: caché

Si vous pouvez échanger les positions html de 2 et 3 comme suit:

<div id="header-e1">
    1 is wider
</div>
<div id="header-e3">
    3 is also
</div>
<div id="header-e2">
    2 conforms
</div>

Ensuite, vous pouvez définir ce css qui fera que 2 "remplisse" l’espace disponible à cause du overlow: hidden qui y figure. Donc si 1 & 3 se développent, 2 se rétrécit (rétrécit la fenêtre pour voir ce qui se passe à une taille vraiment petite).

#header-e1 {float: left;}
#header-e2 {overflow: hidden;}
#header-e3 {float: right;}

Techniquement, vous pourriez conserver votre commande html actuelle et votre float: left à la fois sur 1 & 2 et make 3 sur le flex div avec overflow: hidden. Vous pouvez faire de même avec 1 en inversant complètement l'ordre du code html et en définissant 2 & 3 sur float: right avec 1 ayant overflow: hidden. Pour moi, il semblerait préférable d'avoir le flex moyen, mais vous connaissez mieux votre application que moi.

22
ScottS

Si vous essayez de créer une largeur de réponse sur le site, vous pouvez essayer ce qui suit (33%, c'est environ un tiers):

#header-e1 {
    float: left;
    width:33%;
    border: 1px solid black;
}

#header-e2 {
    float: left;
    width:33%;
    border: 1px solid black;
}

#header-e3 {
    float: left;
    width:33%;
    border: 1px solid black;
}

Vous pouvez également utiliser des largeurs fixes pour les divs. Si vous voulez vous éloigner les uns des autres, vous pouvez jouer avec leurs marges gauche/droite, etc.

Voici une édition sans largeur:

#wrapper {
    position:relative; (add to wrapper)
}

#header-e1 {
    position:absolute;
    left:0;
    border:1px solid black;
}

#header-e2 {
    position:absolute;
    left:50%;
    border:1px solid black;
}

#header-e3 {
    position:absolute;
    right:0;
    border: 1px solid black;
}
4
RevConcept

Vous devez donner une largeur aux divs de votre en-tête et laisser à gauche l'entête-e3.

Remarque: Ils ont tous les mêmes propriétés CSS. Il suffit donc de leur attribuer la même classe que .headerDivs, sans code répétitif

Edit: voici un jsfiddle de travail: http://jsfiddle.net/eNDPG/

1
Andy

Vous pouvez faire quelque chose comme ça:

HTML

<div>
    <div id="left">Left</div>
    <div id="right">Right</div>
    <div id="center">Center</div>
</div>

CSS

#left {
  float: left;
  border: 1px solid red;
}

#right {
  float: right;
  border: 1px solid blue;
}

#center {
  margin-left: 50px;
  margin-right: 50px;
  border: 1px solid green;
  text-align: center;
}

Le <div> centré doit être le dernier dans le code HTML.

Voici un JS Bin à tester: http://jsbin.com/evagat/2/edit

0
Leniel Maccaferri
                    <style type="text/css">
                    body {
                    margin:0;
                    }
                    #header {
                    width:100%;
                    **strong text**margin:auto;
                    height:10%;
                    background-color:red;
                    }
                    #left {
                    width:20%;
                    float:left;
                    #margin:auto auto auto auto;
                    height:100%;
                    background-color:blue;
                    }
                    #right {
                    float:right;
                    width:20%;
                    #margin:auto auto auto auto;
                    height:100%;
                    background-color:green;
                    }
                    #middle {
                    position:relative;
                    left:0;
                    right:0;
                    margin:auto;
                    height:80%;
                    background-color:yellow;
                    width:100%;
                    }
                    #middle1 {
                    width: 80%;
                    margin:auto;
                    height:45%;
                    background-color:black;
                    }
                    #middle2 {
                    width: 80%;
                    margin:auto;
                    height:40%;
                    background-color:brown;
                    }
                    #middle3 {
                    width: 80%;
                    margin:auto;
                    height:15%;
                    background-color:orange;
                    }
                    #midmain {
                    width: auto;
                    margin:auto;
                    height:100%;
                    background-color:white;
                    }
                    #footer {
                    width:100%;
                    margin:auto;
                    height:10%;
                    background-color:red;
                    }
                    </style>

maintenant, vérifiez les commentaires pour la conception HTML.

0
P P

J'utilise une idée similaire à celle suggérée par RevCocnept avec le width: 33%, à l'exception de l'utilisation de display: inline-block au lieu de float: left. Cela évite de supprimer les éléments div de #header du flux de la page et de rendre la hauteur de #header égale à zéro.

#header > div {
    display: inline-block;
    width: 31%;
    margin: 5px 1%;
}

Démo

0
Zhihao