box-pack表示父容器里面子容器的水平对齐方式,可选参数如下所示:
start | end | center | justify
<article class="wrap"> <section class="sectionOne">01</section> <section class="sectionTwo">02</section> <section class="sectionThree">03</section> </article>
.wrap{ width:600px; height:108px; border:1px solid red; display:-moz-box; display:-webkit-box; display:box; -moz-box-pack:end; -webkit-box-pack:end; -o-box-pack:end; box-pack:end; } .wrap section{ width:100px; } .wrap .sectionOne{ background:orange; } .wrap .sectionTwo{ background:purple; } .wrap .sectionThree{ background:green; }
start
在box-pack表示水平居左对齐,如下图所示
end
在box-pack表示水平居右对齐,如下图所示
center
在box-pack表示水平居中对齐,如下图所示
justify
在box-pack表示水平等分父容器宽度(唯一遗憾的是,firefox与opera暂时不支持,只有safari、chrome支持)