webkit-box-align-horiz-1a.html (4331B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title> 9 CSS Test: horizontally-oriented "display: -webkit-box" container, 10 with all the various -webkit-box-align values. 11 </title> 12 <style> 13 .box { 14 display: -webkit-box; 15 border: 1px solid black; 16 margin: 5px 20px; 17 float: left; /* For testing in "rows" */ 18 font: 10px serif; 19 } 20 .box > *:nth-child(1) { 21 background: turquoise; 22 /* auto width */ 23 height: 1em; 24 } 25 .box > *:nth-child(2) { 26 background: salmon; 27 font-size: 50%; 28 width: 2em; 29 /* auto height */ 30 } 31 32 .bastart { -webkit-box-align: start; } 33 .bacenter { -webkit-box-align: center; } 34 .baend { -webkit-box-align: end; } 35 .babaseline { -webkit-box-align: baseline; } 36 .bastretch { -webkit-box-align: stretch; } 37 br { clear: both; } 38 </style> 39 </head> 40 <body> 41 <!-- FIRST ROW: Default -webkit-box-align --> 42 <!-- intrinsically sized --> 43 <div class="box"> 44 <div>a</div><div>b</div> 45 </div> 46 47 <!-- explicit size, extra width --> 48 <div class="box" style="width: 36px"> 49 <div>a</div><div>b</div> 50 </div> 51 52 <!-- explicit size, extra height --> 53 <div class="box" style="height: 40px"> 54 <div>a</div><div>b</div> 55 </div> 56 57 <!-- explicit size, extra height and width --> 58 <div class="box" style="width: 36px; height: 40px"> 59 <div>a</div><div>b</div> 60 </div> 61 <br> 62 63 <!-- SECOND ROW: -webkit-box-align: start --> 64 <!-- intrinsically sized --> 65 <div class="box bastart"> 66 <div>a</div><div>b</div> 67 </div> 68 69 <!-- explicit size, extra width --> 70 <div class="box bastart" style="width: 36px"> 71 <div>a</div><div>b</div> 72 </div> 73 74 <!-- explicit size, extra height --> 75 <div class="box bastart" style="height: 40px"> 76 <div>a</div><div>b</div> 77 </div> 78 79 <!-- explicit size, extra height and width --> 80 <div class="box bastart" style="width: 36px; height: 40px"> 81 <div>a</div><div>b</div> 82 </div> 83 <br> 84 85 <!-- THIRD ROW: -webkit-box-align: center --> 86 <!-- intrinsically sized --> 87 <div class="box bacenter"> 88 <div>a</div><div>b</div> 89 </div> 90 91 <!-- explicit size, extra width --> 92 <div class="box bacenter" style="width: 36px"> 93 <div>a</div><div>b</div> 94 </div> 95 96 <!-- explicit size, extra height --> 97 <div class="box bacenter" style="height: 40px"> 98 <div>a</div><div>b</div> 99 </div> 100 101 <!-- explicit size, extra height and width --> 102 <div class="box bacenter" style="width: 36px; height: 40px"> 103 <div>a</div><div>b</div> 104 </div> 105 <br> 106 107 <!-- FOURTH ROW: -webkit-box-align: end --> 108 <!-- intrinsically sized --> 109 <div class="box baend"> 110 <div>a</div><div>b</div> 111 </div> 112 113 <!-- explicit size, extra width --> 114 <div class="box baend" style="width: 36px"> 115 <div>a</div><div>b</div> 116 </div> 117 118 <!-- explicit size, extra height --> 119 <div class="box baend" style="height: 40px"> 120 <div>a</div><div>b</div> 121 </div> 122 123 <!-- explicit size, extra height and width --> 124 <div class="box baend" style="width: 36px; height: 40px"> 125 <div>a</div><div>b</div> 126 </div> 127 <br> 128 129 <!-- FIFTH ROW: -webkit-box-align: baseline --> 130 <!-- intrinsically sized --> 131 <div class="box babaseline"> 132 <div>a</div><div>b</div> 133 </div> 134 135 <!-- explicit size, extra width --> 136 <div class="box babaseline" style="width: 36px"> 137 <div>a</div><div>b</div> 138 </div> 139 140 <!-- explicit size, extra height --> 141 <div class="box babaseline" style="height: 40px"> 142 <div>a</div><div>b</div> 143 </div> 144 145 <!-- explicit size, extra height and width --> 146 <div class="box babaseline" style="width: 36px; height: 40px"> 147 <div>a</div><div>b</div> 148 </div> 149 <br> 150 <!-- SIXTH ROW: -webkit-box-align: stretch --> 151 <!-- intrinsically sized --> 152 <div class="box bastretch"> 153 <div>a</div><div>b</div> 154 </div> 155 156 <!-- explicit size, extra width --> 157 <div class="box bastretch" style="width: 36px"> 158 <div>a</div><div>b</div> 159 </div> 160 161 <!-- explicit size, extra height --> 162 <div class="box bastretch" style="height: 40px"> 163 <div>a</div><div>b</div> 164 </div> 165 166 <!-- explicit size, extra height and width --> 167 <div class="box bastretch" style="width: 36px; height: 40px"> 168 <div>a</div><div>b</div> 169 </div> 170 <br> 171 172 </body> 173 </html>