rtl-grid-placement-definite-001-ref.html (1130B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } 8 9 .grid1, .grid2 { 10 block-size: 60px; 11 border: 2px solid green; 12 position: relative; 13 } 14 15 .grid2 { 16 border-width: 20px; 17 } 18 19 span { 20 position: absolute; 21 background: lime; 22 border: 1px solid black; 23 box-sizing: border-box; 24 } 25 26 .a { 27 inset-inline-start: 40px; 28 inset-block-start: 0px; 29 inline-size: 60px; 30 block-size: 40px; 31 } 32 .b { 33 inset-inline-start: 20px; 34 inset-block-start: 40px; 35 inline-size: 60px; 36 block-size: 20px; 37 } 38 .c { 39 inset-inline-start: 80px; 40 inset-block-start: 40px; 41 inline-size: 60px; 42 block-size: 20px; 43 } 44 .d { 45 inset-inline-start: 0px; 46 inset-block-start: 0px; 47 inline-size: 20px; 48 block-size: 60px; 49 } 50 </style> 51 </head> 52 <body dir=rtl> 53 54 <div class=grid1> 55 <span class="a">a</span> 56 <span class="b">b</span> 57 <span class="c">c</span> 58 <span class="d">d</span> 59 </div> 60 61 <div class=grid2> 62 <span class="a">a</span> 63 <span class="b">b</span> 64 <span class="c">c</span> 65 <span class="d">d</span> 66 </div> 67 68 </body> 69 </html>