Bonjour,
J'essaye diverses solutions pour aligner 3 div à l'intérieur d'une autre, en occupant (si possible) toute la place, ou a minima en respectant un positionnement gauche-milieu-droite. Le centrage vertical est un autre problème "en soit", là il s'agit juste de la répartition de ces divs.
J'ai une div englobante (boite_ext) qui sera positionné quelque part par quelqu'un. Dedans, je place une div intérieure qui sera "mon" environnement/périmètre de travail (boite_int). Dans "ma" div, je dois en placer 3, typiquement avec un alignement gauche-milieu-droite.
Dans ce cas précis, je tente d'utiliser des display:table-cell (on peut aussi utiliser, table, translate, flex… ok, mais là je dois me pencher sur le cas "table-cell").
Le html :
Le css :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="test_2.css"> <Title>Tests #2</title> </head> <body> <main role="main"> <div class="boite_ext"> <div class="boite_int"> <div class="gauche"> gauche </div> <div class="milieu"> milieu<br>bla bli bla bli bla bli </div> <div class="droite"> droite </div> </div> </div> </main> </body> </html>
Le gag/problème se situe avec les deux lignes que j'ai laissées en commentaire. Ma boite_int prend correctement toute la place dans la boite_ext. Si j'active le display:table, ma boite_int se colle aux trois div internes. Mais si j'active lewidth:100%, la boite_int fait bien 100% de la taille parente, mais se décale horizontalement vers la droite en additionnant les margin et padding.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 .boite_ext { border: 2px solid blue; max-width: 40%; padding: 10px; } .boite_int { margin: 10px auto; border: 2px solid red; padding: 10px; /* width: 100%; display: table; */ } .boite_int div { border: 2px solid; display: table-cell; vertical-align: middle; text-align: center; }
Ai-je loupé un truc pour que le tout se mette correctement (avec les table / table-cell) ? Ou faut-il vraiment dans ce cas calculer avant ou par js (js que je dois éviter) ?
Merci pour l'éclairage…
p.s. : si quelqu'un peut me rappeler comment placer quelques mots de code en cours de texte du message…
Partager