OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 html { -webkit-writing-mode: vertical-rl; } | |
6 | |
7 .first-box { | |
8 margin: 5px; | |
9 border: 1px solid blue; | |
10 } | |
11 | |
12 #first-box { | |
13 border-left: 0; | |
14 } | |
15 | |
16 #first-box-2 { | |
17 border-right: 0; | |
18 border-left: 0; | |
19 margin-left: 0; | |
20 margin-right: 0; | |
21 } | |
22 | |
23 #first-box-3 { | |
24 border-right: 0; | |
25 margin-right: 0; | |
26 } | |
27 | |
28 .second-box { | |
29 margin: 10px; | |
30 border: 1px solid green; | |
31 } | |
32 | |
33 #second-box { | |
34 border-left: 0; | |
35 } | |
36 | |
37 #second-box-2 { | |
38 border-right: 0; | |
39 border-left: 0; | |
40 margin-left: 0; | |
41 margin-right: 0; | |
42 } | |
43 | |
44 #second-box-3 { | |
45 border-right: 0; | |
46 margin-right: 0; | |
47 } | |
48 | |
49 p { margin: 0; font: 12px/16px monospace; } | |
50 | |
51 #region1, #region2, #region3 { | |
52 border: 1px solid black; | |
53 overflow: hidden; | |
54 } | |
55 | |
56 #region1 { | |
57 width: 200px; | |
58 height: 100px; | |
59 } | |
60 | |
61 #region2 { | |
62 width: 300px; | |
63 height: 180px; | |
64 } | |
65 | |
66 #region3 { | |
67 width: 120px; | |
68 height: 120px; | |
69 } | |
70 </style> | |
71 </head> | |
72 <body> | |
73 <div id="container"> | |
74 <div id="region1"> | |
75 <div id="first-box" class="first-box"> | |
76 <div id="second-box" class="second-box"> | |
77 <p>This line of text should not get out of the region. T
his line of text should not get</p> | |
78 <br/> | |
79 </div> | |
80 </div> | |
81 </div> | |
82 <div id="region2"> | |
83 <div id="first-box-2" class="first-box"> | |
84 <div id="second-box-2" class="second-box"> | |
85 <p>out of the region. This line of text should not get o
ut of the region. This line of text should not get out of the region.</p> | |
86 <p>This line of text should not get out of the region. T
his line of text should not get out of the region. This line of text should not
get out of the region. This line of text should not get out of the region.</p> | |
87 <br/> | |
88 </div> | |
89 </div> | |
90 </div> | |
91 <div id="region3"> | |
92 <div id="first-box-3" class="first-box"> | |
93 <div id="second-box-3" class="second-box"> | |
94 <p>This line of text should not get out of the region.</
p> | |
95 </div> | |
96 </div> | |
97 </div> | |
98 </div> | |
99 </body> | |
100 </html> | |
OLD | NEW |