OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <style> | |
3 .container { | |
4 margin-right: 4px; | |
5 position: absolute; | |
6 } | |
7 .multicol { | |
8 width: 110px; | |
9 height: 150px; | |
10 border: 5px solid black; | |
11 } | |
12 .multicol > div { | |
13 float: left; | |
14 width: 50px; | |
15 height: 50px; | |
16 } | |
17 | |
18 .row1_left { background-color: black; } | |
19 .row1_right { background-color: #0000b0; } | |
20 .row2_left { background-color: #0000f0; } | |
21 .row2_right { background-color: #000090; } | |
22 .row3_left { background-color: #0000d0; } | |
23 .row3_right { background-color: black; } | |
24 | |
25 .row1_right, | |
26 .row2_right, | |
27 .row3_right { | |
28 margin-left: 10px; | |
29 } | |
30 | |
31 #opacity .row1_right, | |
32 #opacity .row2_left, | |
33 #opacity .row2_right, | |
34 #opacity .row3_left { | |
35 opacity: 0.99; | |
36 } | |
37 | |
38 .pos1 { left: 10px; top: 10px; } | |
39 .pos2 { left: 150px; top: 10px; } | |
40 .pos3 { left: 10px; top: 200px; } | |
41 .pos4 { left: 150px; top: 200px; } | |
42 | |
43 </style> | |
44 <div class="container pos1"> | |
45 Overflow: | |
46 <div class="multicol"> | |
47 <div class="row1_left"></div> | |
48 <div class="row1_right"></div> | |
49 <div class="row2_left"></div> | |
50 <div class="row2_right"></div> | |
51 <div class="row3_left"></div> | |
52 <div class="row3_right"></div> | |
53 </div> | |
54 </div> | |
55 <div class="container pos2"> | |
56 Transforms: | |
57 <div class="multicol"> | |
58 <div class="row1_left"></div> | |
59 <div class="row1_right"></div> | |
60 <div class="row2_left"></div> | |
61 <div class="row2_right"></div> | |
62 <div class="row3_left"></div> | |
63 <div class="row3_right"></div> | |
64 </div> | |
65 </div> | |
66 <div class="container pos3"> | |
67 Relative Pos.: | |
68 <div class="multicol"> | |
69 <div class="row1_left"></div> | |
70 <div class="row1_right"></div> | |
71 <div class="row2_left"></div> | |
72 <div class="row2_right"></div> | |
73 <div class="row3_left"></div> | |
74 <div class="row3_right"></div> | |
75 </div> | |
76 </div> | |
77 <div class="container pos4" id="opacity"> | |
78 Opacity: | |
79 <div class="multicol"> | |
80 <div class="row1_left"></div> | |
81 <div class="row1_right"></div> | |
82 <div class="row2_left"></div> | |
83 <div class="row2_right"></div> | |
84 <div class="row3_left"></div> | |
85 <div class="row3_right"></div> | |
86 </div> | |
87 </div> | |
OLD | NEW |