Quelle est la bonne façon de disposer trois divs enfants avec un à gauche, un au milieu et un à droite du parent ?

Question

Je n'arrive pas à trouver un moyen élégant pour que mes divs s'affichent comme suit, en CSS

---------------------------------------------------------
|                                                       | 
| child div 1           child div 2          child div 3|
|                                                       |
---------------------------------------------------------

l'idée étant que la boîte est un div parent et qu'elle peut être de n'importe quelle largeur et que ces trois enfants seraient toujours alignés avec 1 à gauche, 2 au milieu et 3 à droite.

Pour les points bonus, s'ils peuvent être alignés verticalement centrés dans la division parent, ce serait fantastique, mais je peux m'en passer.

TIA.

Answer 1

Vous allez devoir définir la largeur de la division parent et utiliser des pourcentages pour définir la largeur des divisions enfant, ou vous devez donner aux divisions enfant une largeur fixe et permettre à la division parent de s'étendre autour d'elles. Voici un code avec lequel vous pouvez commencer :

HTML :

<div class="block">
    <div class="sidebar">

    </div><div class="main">

    </div><div class="sidebar">

    </div>
</div>

Remarquez comment la fermeture </div> et les suivantes <div> sont touchants. Pour que les éléments inline et inline-block se touchent, il ne doit pas y avoir d'espace entre eux dans le balisage.

CSS :

.block { 
    border: 1px solid;
    display: inline-block; }
.block .sidebar {
    background: red;
    width: 100px;
    height: 40px;
    vertical-align: middle;
    display: inline-block; }
.block .main {
    background: blue;
    width: 400px;
    height: 100px;
    vertical-align: middle;
    display: inline-block; }
.block div { margin: 0; }
.block p { margin: 0; }

Si vous décidez de faire .block une largeur fixe, supprimez display: inline-block .

Ce qui suit s'applique uniquement lorsque .block n'a pas une largeur fixe :

Si vous devez centrer horizontalement .block vous margin: 0 auto ne fonctionnera pas car .block est un élément en ligne, ce qui est nécessaire pour qu'il s'enroule autour des éléments à largeur fixe. Vous devez ajouter text-align: center à son élément parent (qui pourrait être votre body élément si .block est votre élément le plus extérieur), puis ajoutez text-align: left a .block .

Avant-première : http://jsfiddle.net/Wexcode/jfQqF/

Answer 2

Rangée de tableaux

 list-display: table-row;

sur la div parent et list-display : table-cell ; sur les enfants. Puis text-align right sur la div enfant 3. L'avantage est que vous n'avez pas besoin de spécifier une largeur.

Flottant

float: left;

Définissez une largeur sur les trois divs enfants et utilisez : float : left ; Vous pouvez avoir besoin d'une quatrième div dans le parent avec clear : both ; pour effacer ces flottants correctement.