Bonjour,
je suis parti d'un code de jreaux62 que j'ai fortement dégraissé, le but étant de faire une mise en page simple dont l'aspect est similaire à ce qu'on obtenait autrefois avec les balises <table>, <tr> et <td>.
J'y suis parvenu mais il y a une propriété CSS indispensable (content)(si on l'enlève, l'affectation de la largeur des 2 blocs n'est plus possible) et je ne trouve pas l'explication. Peut-on m'expliquer ?
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 <main> <section class="table clearfix"> <div class="table-cell" id="boite1">boite 1 </div> <div class="table-cell" id="boite2">boite 2 </div> <!-- <div class="cboth"></div>--> </div>
Code css : 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
26
27
28
29
30
31
32
33
34
35
36
37 /* permet de remettre dans le flux les blocs flottants */ .clearfix:before, .clearfix:after { /*display:table;*/ content:""; } /*.clearfix:after { clear:both; }*/ /* TABLE */ .table { display: table; width: 100%; } .table-row { display: table-row; } .table-cell { display: table-cell; vertical-align:top; } #boite1, #boite2 { width:20%; } /* -------------------------------------- */ /* déco (facultatif) */ #boite1, #boite2 { padding:2%; border: 1px dashed #ccc; background: #f6f6f6; }
http://codepen.io/laurentsc/pen/jygzXz
Partager