webkit-box-pack-horiz-1b.html (3733B)
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 -webkit-box-orient: horizontal; 16 border: 1px solid black; 17 margin: 5px 20px; 18 float: left; /* For testing in "rows" */ 19 font: 10px serif; 20 } 21 .box > *:nth-child(1) { 22 background: turquoise; 23 /* auto width */ 24 height: 1em; 25 } 26 .box > *:nth-child(2) { 27 background: salmon; 28 font-size: 50%; 29 width: 2em; 30 /* auto height */ 31 } 32 33 .bpstart { -webkit-box-pack: start; } 34 .bpcenter { -webkit-box-pack: center; } 35 .bpend { -webkit-box-pack: end; } 36 .bpjustify { -webkit-box-pack: justify; } 37 br { clear: both; } 38 </style> 39 </head> 40 <body> 41 <!-- FIRST ROW: Default -webkit-box-pack --> 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-pack: start --> 64 <!-- intrinsically sized --> 65 <div class="box bpstart"> 66 <div>a</div><div>b</div> 67 </div> 68 69 <!-- explicit size, extra width --> 70 <div class="box bpstart" style="width: 36px"> 71 <div>a</div><div>b</div> 72 </div> 73 74 <!-- explicit size, extra height --> 75 <div class="box bpstart" style="height: 40px"> 76 <div>a</div><div>b</div> 77 </div> 78 79 <!-- explicit size, extra height and width --> 80 <div class="box bpstart" style="width: 36px; height: 40px"> 81 <div>a</div><div>b</div> 82 </div> 83 <br> 84 85 <!-- THIRD ROW: -webkit-box-pack: center --> 86 <!-- intrinsically sized --> 87 <div class="box bpcenter"> 88 <div>a</div><div>b</div> 89 </div> 90 91 <!-- explicit size, extra width --> 92 <div class="box bpcenter" style="width: 36px"> 93 <div>a</div><div>b</div> 94 </div> 95 96 <!-- explicit size, extra height --> 97 <div class="box bpcenter" style="height: 40px"> 98 <div>a</div><div>b</div> 99 </div> 100 101 <!-- explicit size, extra height and width --> 102 <div class="box bpcenter" style="width: 36px; height: 40px"> 103 <div>a</div><div>b</div> 104 </div> 105 <br> 106 107 <!-- FOURTH ROW: -webkit-box-pack: end --> 108 <!-- intrinsically sized --> 109 <div class="box bpend"> 110 <div>a</div><div>b</div> 111 </div> 112 113 <!-- explicit size, extra width --> 114 <div class="box bpend" style="width: 36px"> 115 <div>a</div><div>b</div> 116 </div> 117 118 <!-- explicit size, extra height --> 119 <div class="box bpend" style="height: 40px"> 120 <div>a</div><div>b</div> 121 </div> 122 123 <!-- explicit size, extra height and width --> 124 <div class="box bpend" style="width: 36px; height: 40px"> 125 <div>a</div><div>b</div> 126 </div> 127 <br> 128 129 <!-- FIFTH ROW: -webkit-box-pack: justify --> 130 <!-- intrinsically sized --> 131 <div class="box bpjustify"> 132 <div>a</div><div>b</div> 133 </div> 134 135 <!-- explicit size, extra width --> 136 <div class="box bpjustify" style="width: 36px"> 137 <div>a</div><div>b</div> 138 </div> 139 140 <!-- explicit size, extra height --> 141 <div class="box bpjustify" style="height: 40px"> 142 <div>a</div><div>b</div> 143 </div> 144 145 <!-- explicit size, extra height and width --> 146 <div class="box bpjustify" style="width: 36px; height: 40px"> 147 <div>a</div><div>b</div> 148 </div> 149 <br> 150 151 </body> 152 </html>