OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <link href="resources/flexbox.css" rel="stylesheet"> | |
4 <style> | |
5 .flexbox { | |
6 background: green; | |
7 position: relative; | |
8 } | |
9 </style> | |
10 <script src="../../resources/check-layout.js"></script> | |
11 <body onload="checkLayout('.flexbox')"> | |
12 <div class="flexbox" style="height:100px; padding: 10px; border:2px solid red;"> | |
leviw_travelin_and_unemployed
2014/07/15 20:08:29
Nit: please promote the repeated inline styles to
harpreet.sk
2014/07/16 15:43:01
Done.
| |
13 <div id="flexItem1" data-expected-padding-top="10" data-expected-padding-bot tom="10" style="background:yellow; padding:10%;">Pasta batman</div> | |
14 </div> | |
15 | |
16 <div class="flexbox" style="height:30%; padding: 10px; border:2px solid red;"> | |
17 <div id="flexItem2" data-expected-padding-top="0" data-expected-padding-bott om="0" style="padding:20%; background:yellow">Pasta batman</div> | |
18 </div> | |
19 | |
20 <div class="flexbox" style="padding: 10px; border:2px solid red;"> | |
21 <div id="flexItem3" data-expected-padding-top="0" data-expected-padding-bott om="0" style="padding:30%; background:yellow">Pasta batman</div> | |
22 </div> | |
23 | |
24 <div style="height:200px; padding: 10px; border:2px solid red;"> | |
25 <div class="flexbox" style="height:30%"> | |
26 <div id="flexItem2" data-expected-padding-top="12" data-expected-padding -bottom="12" style="padding:20%; background:yellow">Pasta batman</div> | |
27 </div> | |
28 </div> | |
29 | |
30 <div style="height:200px; padding: 10px; border:2px solid red;"> | |
31 <div style="height:40%"> | |
32 <div class="flexbox" style="height:30%"> | |
33 <div id="flexItem2" data-expected-padding-top="12" data-expected-padding -bottom="12" style="padding:50%; background:yellow">Pasta batman</div> | |
34 </div> | |
35 </div> | |
36 </div> | |
37 | |
38 <div class="flexbox" style="height:min-content; padding: 10px; border:2px solid red;"> | |
39 <div id="flexItem1" data-expected-padding-top="0" data-expected-padding-bott om="0" style="background:yellow; padding:10%;">Pasta batman</div> | |
40 </div> | |
41 | |
42 <div class="flexbox" style="height:max-content; padding: 10px; border:2px solid red;"> | |
43 <div id="flexItem1" data-expected-padding-top="0" data-expected-padding-bott om="0" style="background:yellow; padding:10%;">Pasta batman</div> | |
44 </div> | |
45 | |
46 <div class="flexbox" style="height:fit-content; padding: 10px; border:2px solid red;"> | |
47 <div id="flexItem1" data-expected-padding-top="0" data-expected-padding-bott om="0" style="background:yellow; padding:10%;">Pasta batman</div> | |
48 </div> | |
49 | |
50 <div class="flexbox" style="min-height:100px; max-height:100px; padding: 10px; b order:2px solid red;"> | |
51 <div id="flexItem1" data-expected-padding-top="0" data-expected-padding-bott om="0" style="background:yellow; padding:10%;">Pasta batman</div> | |
52 </div> | |
53 </body> | |
54 </html> | |
OLD | NEW |