webkit-box-pack-horiz-1a.html (3695B)
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-pack 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 .bpstart { -webkit-box-pack: start; } 33 .bpcenter { -webkit-box-pack: center; } 34 .bpend { -webkit-box-pack: end; } 35 .bpjustify { -webkit-box-pack: justify; } 36 br { clear: both; } 37 </style> 38 </head> 39 <body> 40 <!-- FIRST ROW: Default -webkit-box-pack --> 41 <!-- intrinsically sized --> 42 <div class="box"> 43 <div>a</div><div>b</div> 44 </div> 45 46 <!-- explicit size, extra width --> 47 <div class="box" style="width: 36px"> 48 <div>a</div><div>b</div> 49 </div> 50 51 <!-- explicit size, extra height --> 52 <div class="box" style="height: 40px"> 53 <div>a</div><div>b</div> 54 </div> 55 56 <!-- explicit size, extra height and width --> 57 <div class="box" style="width: 36px; height: 40px"> 58 <div>a</div><div>b</div> 59 </div> 60 <br> 61 62 <!-- SECOND ROW: -webkit-box-pack: start --> 63 <!-- intrinsically sized --> 64 <div class="box bpstart"> 65 <div>a</div><div>b</div> 66 </div> 67 68 <!-- explicit size, extra width --> 69 <div class="box bpstart" style="width: 36px"> 70 <div>a</div><div>b</div> 71 </div> 72 73 <!-- explicit size, extra height --> 74 <div class="box bpstart" style="height: 40px"> 75 <div>a</div><div>b</div> 76 </div> 77 78 <!-- explicit size, extra height and width --> 79 <div class="box bpstart" style="width: 36px; height: 40px"> 80 <div>a</div><div>b</div> 81 </div> 82 <br> 83 84 <!-- THIRD ROW: -webkit-box-pack: center --> 85 <!-- intrinsically sized --> 86 <div class="box bpcenter"> 87 <div>a</div><div>b</div> 88 </div> 89 90 <!-- explicit size, extra width --> 91 <div class="box bpcenter" style="width: 36px"> 92 <div>a</div><div>b</div> 93 </div> 94 95 <!-- explicit size, extra height --> 96 <div class="box bpcenter" style="height: 40px"> 97 <div>a</div><div>b</div> 98 </div> 99 100 <!-- explicit size, extra height and width --> 101 <div class="box bpcenter" style="width: 36px; height: 40px"> 102 <div>a</div><div>b</div> 103 </div> 104 <br> 105 106 <!-- FOURTH ROW: -webkit-box-pack: end --> 107 <!-- intrinsically sized --> 108 <div class="box bpend"> 109 <div>a</div><div>b</div> 110 </div> 111 112 <!-- explicit size, extra width --> 113 <div class="box bpend" style="width: 36px"> 114 <div>a</div><div>b</div> 115 </div> 116 117 <!-- explicit size, extra height --> 118 <div class="box bpend" style="height: 40px"> 119 <div>a</div><div>b</div> 120 </div> 121 122 <!-- explicit size, extra height and width --> 123 <div class="box bpend" style="width: 36px; height: 40px"> 124 <div>a</div><div>b</div> 125 </div> 126 <br> 127 128 <!-- FIFTH ROW: -webkit-box-pack: justify --> 129 <!-- intrinsically sized --> 130 <div class="box bpjustify"> 131 <div>a</div><div>b</div> 132 </div> 133 134 <!-- explicit size, extra width --> 135 <div class="box bpjustify" style="width: 36px"> 136 <div>a</div><div>b</div> 137 </div> 138 139 <!-- explicit size, extra height --> 140 <div class="box bpjustify" style="height: 40px"> 141 <div>a</div><div>b</div> 142 </div> 143 144 <!-- explicit size, extra height and width --> 145 <div class="box bpjustify" style="width: 36px; height: 40px"> 146 <div>a</div><div>b</div> 147 </div> 148 <br> 149 150 </body> 151 </html>