教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

ui培訓(xùn)之流式布局彈性盒模型(三)

更新時間:2016年05月06日15時32分 來源:傳智播客UI培訓(xùn)學(xué)院 瀏覽次數(shù):

三、 特殊的彈性布局

在手機頁面制作中,我們經(jīng)常會遇見一種特殊的布局形式。比如下圖所示,中間的部分是百分比的寬度,而左右兩端是固定布局。這是如何做到的呢?
方法1:傳統(tǒng)絕對定位的方法
 
方法2:
CSS3中的彈性盒屬性:給父親設(shè)置display:-webkit-box;表示自己的內(nèi)部兒子是彈性盒。給子元素設(shè)置-webkit-box-flex屬性,用數(shù)值表示比例。
  1. div{
  2. width: 800px;
  3. height: 100px;
  4. margin: 100px auto;
  5. background-color: pink;
  6. /*要把盒子變成彈性盒模型:*/
  7. display: -webkit-box;  
  8. }
  9. /*所有的p,既沒有寬度,也沒有浮動*/
  10. div p:nth-child(1){
  11. background-color: red;
  12. -webkit-box-flex:1;
  13. }
  14. div p:nth-child(2){
  15. background-color: blue;
  16. -webkit-box-flex:2;
  17. }
  18. div p:nth-child(3){
  19. background-color: green;
  20. -webkit-box-flex:3;
  21. }
 
高度的等比例變化。

本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處。謝謝!
作者:傳智播客UI培訓(xùn)學(xué)院
首發(fā):http://m.8y3kgpwe.cn/ui 
0 分享到:
和我們在線交談!