OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 #content { | |
6 -webkit-flow-into: flow1; | |
7 } | |
8 | |
9 #first-box { | |
10 margin:50px 10% 0 10%; | |
11 position:relative; | |
12 height:400px; | |
13 } | |
14 | |
15 #region1, #region2 { | |
16 -webkit-flow-from: flow1; | |
17 } | |
18 | |
19 #region1 { | |
20 width: 500px; | |
21 height: 50px; | |
22 } | |
23 | |
24 #region2 { | |
25 width: 320px; | |
26 height: 400px; | |
27 } | |
28 | |
29 .square { | |
30 width:31.25%; | |
31 height:20%; | |
32 position:absolute; | |
33 } | |
34 | |
35 .red { width:80px; height:80px; position:absolute; background-color:red; z-i
ndex:-1 } | |
36 | |
37 #topleft { top:0; left:0; -webkit-writing-mode:vertical-rl; background-color
:#00ff00;} | |
38 #topright { top:0; right:0; -webkit-writing-mode:horizontal-bt; background-c
olor:#00dd00;} | |
39 #bottomleft { bottom:0; left:0; -webkit-writing-mode:vertical-lr; background
-color:#00bb00; } | |
40 #bottomright { bottom:0; right:0px; -webkit-writing-mode:horizontal-tb; back
ground-color:#009900;} | |
41 </style> | |
42 </head> | |
43 | |
44 <body> | |
45 You should see four 80x80 green squares below and no red should be visible. | |
46 | |
47 <div style="position:relative; width:550px;"> | |
48 | |
49 <div id="content"> | |
50 <div id="first-box"> | |
51 <div class="square" id="topleft"></div> | |
52 <div class="square" id="topright"></div> | |
53 <div class="square" id="bottomleft"></div> | |
54 <div class="square" id="bottomright"></div> | |
55 </div> | |
56 </div> | |
57 | |
58 <div id="container"> | |
59 <div id="region1"></div> | |
60 <div id="region2"></div> | |
61 <div id="region3"></div> | |
62 </div> | |
63 | |
64 <div class=red style="top:50px;left:32px;"></div> | |
65 | |
66 <div class=red style="top:370px;left:32px;"></div> | |
67 | |
68 <div class=red style="top:50px;right:262px;"></div> | |
69 | |
70 <div class=red style="top:370px;right:262px;"></div> | |
71 </div> | |
72 | |
OLD | NEW |