grid-baseline-align-001-ref.html (1906B)
1 <!DOCTYPE html> 2 <title> 3 Reference for Grid Item (First) Baseline Block-Axis Alignment: auto-height grid, auto row, auto items 4 </title> 5 6 <style> 7 @import "/fonts/ahem.css"; 8 .grid { 9 border: solid silver; 10 margin: 1em 2px; 11 font: 20px/1 Ahem; 12 13 display: inline-block; 14 vertical-align: top; 15 } 16 .grid > div { 17 border: black 10px; 18 border-style: solid none; 19 color: orange; 20 } 21 div + div { 22 font-size: 2em; 23 } 24 div + div + div { 25 font-size: 50%; 26 } 27 28 .ref { 29 position: relative; 30 width: 80px; 31 height: 96px; 32 } 33 .ref > div { 34 position: absolute; 35 } 36 .ref1 { top: 16px; } 37 .ref2 { left: 20px; } 38 .ref3 { top: 24px; 39 left: 60px; } 40 .ref4 { right: 0px; 41 top: 24px; 42 bottom: 0px; 43 width: 10px; 44 height: 10px; } 45 46 .ref.content > div:not(.stripe) { 47 border-color: transparent; 48 } 49 .stripe { 50 width: 80px; 51 height: 76px; 52 } 53 </style> 54 55 <p>Test passes if each pair of boxes is identical.</p> 56 57 <div class="grid self ref"> 58 <div class="ref1"> 59 p<br> 60 p<br> 61 p 62 </div> 63 <div class="ref2"> 64 p 65 </div> 66 <div class="ref3"> 67 p 68 </div> 69 <div class="ref4"> 70 71 </div> 72 </div> 73 74 <div class="grid self ref"> 75 <div class="ref1"> 76 p<br> 77 p<br> 78 p 79 </div> 80 <div class="ref2"> 81 p 82 </div> 83 <div class="ref3"> 84 p 85 </div> 86 <div class="ref4"> 87 88 </div> 89 </div> 90 91 <br> 92 93 <div class="grid content ref"> 94 <div class="ref1"> 95 p<br> 96 p<br> 97 p 98 </div> 99 <div class="ref2"> 100 p 101 </div> 102 <div class="ref3"> 103 p 104 </div> 105 <div class="ref4"> 106 107 </div> 108 <div class="stripe"> 109 </div> 110 </div> 111 112 113 <div class="grid content ref"> 114 <div class="ref1"> 115 p<br> 116 p<br> 117 p 118 </div> 119 <div class="ref2"> 120 p 121 </div> 122 <div class="ref3"> 123 p 124 </div> 125 <div class="ref4"> 126 127 </div> 128 <div class="stripe"> 129 </div> 130 </div>