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