ruby-inlinize-blocks-002.html (1372B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS Test: Inlinize block-level boxes inside ruby</title> 6 <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> 7 <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#anon-gen-inlinize"> 8 <link rel="match" href="ruby-inlinize-blocks-002-ref.html"> 9 <style> 10 body { 11 /* Use a sans-serif font to avoid fuzzy pixels where e.g. the 12 letter "a" bottom-right serif might overlap the table border: */ 13 font: 16px sans-serif; 14 } 15 .block, table, .flex { 16 background-color: yellow; 17 width: 100px; height: 30px; 18 border: 1px solid blue; 19 } 20 .block { display: block; } 21 table { border-collapse: collapse; } 22 td { border: 3px solid red; } 23 .flex { display: flex; } 24 .flex-item { flex: auto; } 25 </style> 26 </head> 27 <body> 28 <div><rb>a<div class="block">b</div>c</rb><rt>x<div class="block">y</div>z</rt></div> 29 <div> 30 <rb>a<table><tr><td>b1</td><td>b2</td></tr></table>c</rb> 31 <rt>x<table><tr><td>y1</td><td>y2</td></tr></table>z</rt> 32 </div> 33 <div> 34 <rb>a<div class="flex"> 35 <div class="flex-item">b1</div> 36 <div class="flex-item">b2</div> 37 </div>c</rb> 38 <rt>x<div class="flex"> 39 <div class="flex-item">y1</div> 40 <div class="flex-item">y2</div> 41 </div>z</rt> 42 </div> 43 </body> 44 </html>