display box 小实践但是对ie的兼容还是得继续奋斗ing。。。。

最新推荐文章于 2021-04-11 21:37:34 发布

xjb许

最新推荐文章于 2021-04-11 21:37:34 发布

阅读量833

点赞数

分类专栏： html、css

本文链接：https://blog.csdn.net/xjb19901008/article/details/24816521

版权

html、css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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>