display box 小實踐 但是對ie的兼容還是得繼續奮鬥ing。。。。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Html Css</title>
      <style>


           #content{
           	display:-moz-box;
            display:-ms-flexbox;
           	display:-webkit-box;
           	display:box;
           	width:100%;
           	line-height: 50px;
            background:green;
           }


           #left{
           	  box-flex:1;
             -moz-box-flex:1;
             -webkit-box-flex:1;
            -ms-box-flex:1;
           	 margin:10px;
           	 background:yellow;         	 
           text-align: center;	
           	 


           }


           #middle{
           	 box-flex:1;
           	-moz-box-flex:1;
           	-webkit-box-flex:1;
            -ms-box-flex:1;
           
           	margin:10px;
           	background:pink;
            text-align:center;
           
           }


            #right{
              box-flex:0;
             -moz-box-flex:0;
             -webkit:box-flex:0;
             -ms-box-flex:0;
           	  margin:10px;
             background:red;
             text-align: center;
            
           }
      </style>
  </head>


  <body>
    <div id="content">
    <div id="left">left</div>
    <div id="middle">middle</div>
    <div id="right">right</div>
    </div>
  </body>


</html>


但是在ie9上就變成這樣了,T_T 剛開始認真搞前端,繼續加油!!!



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章