1079154-1-vertical-rl-columns-ref.html (995B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 @font-face { 7 font-family:test; 8 src:url(../fonts/sil/GenR102.ttf); 9 } 10 body { width: 500px; height: 300px; writing-mode: vertical-rl; 11 font:16px/24px test; margin: 0; border: 1px solid gray; } 12 div { margin: 10px; background: #eee; } 13 </style> 14 </head> 15 16 <body> 17 18 <div> 19 First single-column division. 20 </div> 21 22 <div> 23 <div style="margin: 0; display: inline-block; height: 145px"> 24 Two columns<br> 25 one<br>two<br>three 26 </div><div style="margin: 0; display: inline-block; height: 135px; vertical-align: top"> 27 four<br>five<br>six 28 </div> 29 </div> 30 31 <div> 32 Another single-column division. 33 </div> 34 35 <div> 36 <div style="margin: 0; display: inline-block; height: 95px"> 37 Three columns<br> 38 one 39 </div><div style="margin: 0; display: inline-block; height: 95px">two<br>three<br>four 40 </div><div style="margin: 0; display: inline-block; height: 85px; vertical-align: top">five<br>six 41 </div> 42 </div> 43 44 <div> 45 Final single-column division. 46 </div> 47 48 </body> 49 </html>