首页 > 其他 > 详细

flex和width配合布局

时间:2021-06-25 17:01:25      阅读:11      评论:0      收藏:0      [点我收藏+]

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Document</title>

   <style>

      .left-box{

         height:300px;

         

         width:100px

      }

      .middle-box{

         height:300px;

         

         flex:1

      }

      

      .right-box{

         height:300px;

         

         width:150px

      }

   </style>

</head>

<body>

   <div style=‘width:600px;height:600px;border:solid 1px black;display: flex;‘>

      <div class=‘left-box‘>

 

      </div>

      <div class=‘middle-box‘>

         

      </div>

      <div class=‘right-box‘>

         

      </div>

   </div>

</body>

</html>

flex和width配合布局

原文:https://www.cnblogs.com/wjm12332145/p/14930531.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!