display-inline-grid-ref.html (1233B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>CSS Grid Layout: Reference File</title> 5 <link rel="author" title="swain" href="mailto:swainet@126.com"/> 6 <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-17 --> 7 <style type="text/css"> 8 #container { 9 position:relative; 10 } 11 12 #table { 13 width:400px; 14 height:100px; 15 border-collapse:collapse; 16 } 17 18 #table td { 19 padding:0; 20 vertical-align:top; 21 } 22 23 #table td:first-child { 24 width:100px; 25 } 26 27 #table tr:last-child td { 28 height:30px; 29 } 30 31 #table-wrapper { 32 display:inline-block; 33 clear:right; 34 } 35 36 span { 37 vertical-align:top; 38 } 39 </style> 40 </head> 41 <body> 42 <p>Test passes if there are 4 green rectangles and no red.</p> 43 44 <div id="container"> 45 <div id="table-wrapper"> 46 <table id="table"> 47 <tbody> 48 <tr> 49 <td style="background-color:green">cell1</td> 50 <td style="background-color:limegreen">cell2</td> 51 </tr> 52 <tr> 53 <td style="background-color:limegreen">cell3</td> 54 <td style="background-color:green">cell4</td> 55 </tr> 56 </tbody> 57 </table> 58 </div> 59 <span>Inline</span> 60 </div> 61 </body> 62 </html>