Aligner vers le haut des div

Bonjour,
je souhaiterais pouvoir aligner plusieurs div vers le haut d'un conteneur.
En effet ma page possède un conteneur de taille fixe rempli de div d'une longueur défini (soit 1/3 du conteneur) mais de hauteurs différentes.
Je voudrais que les div soient aligné vers le haut et collé les uns aux autres mais je n'y arrive pas avec les fonctions float ou inline-block...

Merci de vos réponses.

Bonjour,

Peux-t-on avoir le code HTML :roll:?
Merci

Edit : en attendant ton code :

Code:

---

1 2 3 4 5

<div style="width:500px"> <div class="bloctest" style="height:100px;">bloc 1</div> <div class="bloctest" style="height:150px;">bloc 2</div> <div class="bloctest" style="height:200px;">bloc 3</div> </div>

---

Code:

---

1 2 3 4 5

.bloctest{ width:33%; background-color:green; float:left; }

---

Ceci aligne horizontalement 3 <div> de hauteur différente en haut d'un conteneur <div>

Le problème étant que je ne connais pas le nombre de div ni la hauteur de chacun tout cela dépend des actions de l'utilisateur.
Je pense avoir une solution avec la propriété column-count à voir le résultat.

Bonjour, encore une fois, intéressant ! :applo: Par contre, si on affiche les bordures des div, la div 3 passe à la ligne, question de largeur ?
http://codepen.io/anon/pen/VvwRze

Oui car une bordure a, par définition, une largeur :) (border-width)
Exemple :

Code:

---

border : 1px solid silver

---

Ce qui donne 2 pixel de largeur supplémentaires (1 pixel à gauche à gauche et 1 pixel à droite de l'élément HTML)

Bonjour,

Code:

---

1 2 3 4 5 6 7 8 9 10 11

#troiscolonnes { width:600px; -webkit-columns:3; -moz-columns:3; columns:3; } #troiscolonnes > div { overflow:hidden; /* nécessaire pour ne pas couper un bloc */ border:1px solid #ccc; padding:5px; margin:0 0 10px 0; }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div id="troiscolonnes"> <div>bloc 1 fg sdfgdfg sdgfsdfg sdfgsdfg sdfg</div> <div>bloc 2 uyli ul tuil tu</div> <div>bloc 3 sdfgsd hjty sratzeaz eteartaert aertaert aertaert aetraertert aert </div> <div>bloc 1 fg sdfgdfg sdgfsdfg sdfgsdfg sdfg</div> <div>bloc 2 uyli ul tuil tu</div> <div>bloc 3 sdfgsd hjty sratzeaz eteartaert aertaert aertaert aetraertert aert </div> <div>bloc 1 fg sdfgdfg sdgfsdfg sdfgsdfg sdfg</div> <div>bloc 2 uyli ul tuil tu</div> <div>bloc 3 sdfgsd hjty sratzeaz eteartaert aertaert aertaert aetraertert aert </div> <div>bloc 1 fg sdfgdfg sdgfsdfg sdfgsdfg sdfg</div> <div>bloc 2 uyli ul tuil tu</div> <div>bloc 3 sdfgsd hjty sratzeaz eteartaert aertaert aertaert aetraertert aert </div> </div>

---

:merci:

Bonjour,

Citation:

---

Envoyé par Jacques Beauregard

Ce qui donne 2 pixel de largeur supplémentaires (1 pixel à gauche à gauche et 1 pixel à droite de l'élément HTML)

---

sauf si l'on prend soin de mettre la propriété/value box-sizing:border-box sur l'élément, dans ce cas ses width et height prennent en compte la marge intérieure et la bordure.