À gauche, au centre et à droite aligner les divs sur le bas de la même ligne

J'ai trois divs que je voudrais afficher sur la même ligne. Chacun des trois a différentes largeurs et hauteurs, et ils ne sont pas le texte de droite. J'aimerais pour aligner à gauche un (tout à gauche), aligner à droite un autre (vers la droite), et le centre de la troisième (dans le milieu de la div contenant, l'ensemble de la page, dans ce cas).

En outre, j'aimerais les trois divs pour être aligné verticalement vers le bas de la div contenant. La solution que j'ai aligne verticalement vers le haut de la div contenant.

Quelle est la meilleure façon de gérer cela?

InformationsquelleAutor jrdioko | 2011-02-16

20

Par le réglage de votre conteneur div position:relative et l'enfant divs à position:absolute vous pouvez position absolue des divs dans les limites du conteneur.

Cela rend plus facile, que vous pouvez utiliser bottom:0px pour aligner verticalement au fond du récipient, puis utilisez les touches gauche/droite de style de la position le long de l'axe horizontal.

J'ai un travail de jsFiddle: http://jsfiddle.net/Damien_at_SF/KM7sQ/5/ et le code suit:

HTML:
```
<div id="container">
    <div id="left">left</div>
    <div id="center">center</div>
    <div id="right">right</div>    
</div>
```
CSS:
```
#container {
    position:relative;
    height:400px;
    width:100%;
    border:thick solid black;
}
#container div {
    background:grey;
    width:200px;
}
#left {
    position:absolute;
    left:0px;
    bottom:0px;
}
#center {
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:0px;
}
#right {
    position:absolute;
    right:0px;
    bottom:0px;
}
```
Remarque: Pour le "centre" de la div, de la marge gauche = 1/2 de la largeur de la div 🙂

Espère que cela aide 🙂
- +1, si seulement parce que vous avez posté la même idée que moi, mais plus rapide.
- que faire si le centre div de largeur est inconnu ou est dynamique?
- que faire si le conteneur a un fond de laquelle je veux afficher trop? Faire ci-dessus entraînera dans un conteneur ont pas de hauteur
- Encore un autre exemple de ne PAS comprendre CSS; cette question a rien à voir avec position. Faire de la bonne ou de ne pas le faire du tout.
InformationsquelleAutor Damien-Wright

Ma technique est similaire à @Damien-à-SF:

J'ai essayé de le démontrer rigoureusement à toutes les exigences que vous avez demandé.

Démo

HTML:

<div id="container">

    <div id="left"></div>
    <div id="mid"></div>
    <div id="right"></div>

</div>

CSS:

#container {
    position: relative;
    height: 400px;
    width: 80%;
    min-width: 400px;
    margin: 0 auto;

    background: #ccc
}
#left, #right, #mid {
    position: absolute;
    bottom: 0;
}
#left {
    left: 0;
    width: 80px;
    height: 200px;

    background: red
}
#right {
    right: 0;
    width: 120px;
    height: 170px;

    background: blue
}

#mid {
    left:50%;

    margin-left: -80px;
    width: 160px;
    height: 300px;

    background: #f39
}

InformationsquelleAutor thirtydot

Pour faire de votre centre div élastique, vous pourriez faire quelque chose comme:

<div style="display:table; width:500px;">
  <div style="display:table-row;">
    <div style="display:table-cell; width:50px;"></div>
    <div style="display:table-cell;"></div>
    <div style="display:table-cell; width:50px;"></div>
  </div>
</div>

InformationsquelleAutor Babiker

1

Une amélioration supplémentaire à la première réponse:

Dans le "centre" div CSS, vous devez ajouter:
```
text-align:center;
```
Dans le "droit" div CSS, vous devez ajouter:
```
text-align:right;
```
... parfaitement réaliser gauche/centre/droite de l'alignement.

InformationsquelleAutor FoulFoot
0

Ensemble position: relative sur la div contenant, ensemble position: relative sur votre 3 divs, et de définir la bottom attribut de l'3 divs à 0:
```
bottom: 0
```
InformationsquelleAutor Satya

Vous devez vous connecter pour publier un commentaire.