inline-block sur div avec height+width

Bonjour,
j'avoue bloquer sur un truc tout bête,
voilà, j'ai 3 divs (de même taille, width et height) que je voulais mettre les un a coté des autres.
J'utilise donc le display:inline-block tout naturellement
et ca marche bien tant que ces div restent vide., mais les div bougent verticalement en fonction du contenu...
voici le CSS

Code:

---

1 2 3 4 5 6 7 8 9

.container { width: 930px; } .container div { display: inline-block; width: 300px; border:1px solid grey; height:90px; }

---

bon, quand mes boites sont vides c'est bon

Code:

---

1 2 3 4 5

<div class="container"> <div></div> <div></div> <div></div> </div>

---

mais plus du tout quand il y a du contenu (les boites sont suffisamment grandes)

Code:

---

1 2 3 4 5

<div class="container"> <div>123456</div> <div>123<br>456</div> <div></div> </div>

---

Quelqu'un pourrait-il me dire ce qu'il manque a mon CSS ?
Merci.

note : svp, je privilégie la solution inline-block a float.

Bonjour,

1- une solution :

Code:

---

1 2 3 4 5 6 7 8 9 10

.container { display:table; width: 930px; } .container div { display:table-cell; width: 33.33%; border:1px solid grey; height:90px; }

---

2- une autre solution :

Code:

---

1 2 3 4 5 6 7 8 9

.container { display:flex; max-width: 930px; } .container div { flex:1 1 33.33%; border:1px solid grey; height:90px; }

---

Bonjour jreaux62 et merci pour ta réponse rapide.
En effet, flex et table-cell sont très intéressant.

Mais en fait j'aurai aimer comprendre pourquoi le inline-block ne marche pas dans mon code.

Et surtout, je voudrait avoir un correctif qui ne soit pas dépendant d'un conteneur (oui je sais j'en ai mis un dans mon post initial), pour plusieurs raisons comme par exemple : je n'en ai pas la maitrise.

Aussi le comportement de flex et table-cell ne font par revenir a la ligne quand la fenêtre est plus petite, ce n'est pas tres important, mais je cherche vraiment le comportement de inline-block là.

oui je suis pénible, désolé :)

bref:

Code:

---

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

<style>  div {         display: inline-block;         width: 300px;         border:1px solid grey;         height:90px;     } </style>   <div>123456</div> <div>123<br>456</div> <div></div>

---

pourquoi ca ne marche pas ?

Code:

---

1 2 3 4 5 6 7 8 9

.container div { display:inline-block; vertical-align:top; /* important */   width:300px; border:1px solid grey; min-height:90px; margin:4px; }

---

Merci,
bien joué, c'est nickel.
Salutations