1. .wrap{        width:600px;   
2.     height:200px;        display:-moz-box;   
3.     display:-webkit-box;        display:box;   
4. }    .sectionOne{   
5.     background:orange;        -moz-box-flex:3;   
6.     -webkit-box-flex:3;        box-flex:3;   
7. }    .sectionTwo{   
8.     background:purple;        -moz-box-flex:2;   
9.     -webkit-box-flex:2;        box-flex:2;   
10. }    .sectionThree{   
11.     -moz-box-flex:1;        -webkit-box-flex:1;   
12.     box-flex:1;        background:green;   
13. }  

展示效果：

說明：
必須給父容器wrap定義css屬性display:box其子容器才可以進行劃分(如果定了display:box則該容器則定義為了內(nèi)聯(lián)元素，使用margin:0px auto讓其居中是無效的，要想使其居中只能通過它的父容器的text-align:center);分別給sectionOne、sectionTwo、sectionThree的box-flex設置了3、2、1，也就是說這三個子容器將父容器wrap的寬度600px分為6份，sectionOne占居父結構寬度的3/6即300px，sectionOne占居父結構寬度的2/6即200px，sectionThree占居父結構寬度的1/6即100px。