Discussion :

[hpfx]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Invité]

Bonjour,

1- une solution :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[hpfx]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[Invité]

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[hpfx]

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