CSS常见布局

CSS常见布局

1. 左列定宽，右列自适应

   浮动

   <div class="left">left</div>
   <div class="right">right</div>
   <style type="text/css">
       .left{
           width: 100px;
           background: red;
           float: left;
       }
       .right{
           background: yellow;
       }
   </style>
   

   绝对定位

   <div class="container">
       <div class="left">left</div>
       <div class="right">right</div>
   </div>
   <style type="text/css">
       .container{
           width: 100%;
           position: relative;
       }
       .left{
           width: 200px;
           background-color: red;
       }
       .right{
           position: absolute;
           background-color: green;
           left: 200px;
           top: 0;
           right: 0;
       }
   </style>
   

   <div  class="container">
       <div class="left">left</div>
       <div class="right">right</div>
   </div>
   <style type="text/css">
       .container{
       	width: 100%;
       	position: relative;
       }
       .left{
           width: 200px;
           background: red;
           position:absolute;
       }
       .right{
           margin-left: 200px;
           background: green;
       }
   </style>
   

   flex

   <div class="container">
       <div class="left">left</div>
       <div class="right">right</div>
   </div>
   <style type="text/css">
       .container{
           display: flex;
       }
       .left{
           width: 200px;
           background-color: red;
       }
       .right{
           flex: 1;
           background-color: green;
       }
   </style>
   

2. 两栏定宽，中栏自适应

   <div class="left">left</div>
   <div class="right">right</div>
   <div class="middle">middle</div>
   <style type="text/css">
       .left{
           width: 200px;
           float: left;
           background-color: red;
       }
       .right{
           width: 200px;
           float: right;
           background-color: red;
       }
       .middle{
           margin: 0 auto;
           background-color: green;
       }
   </style>
   

   flex

   <div class="container">
       <div class="left">left</div>
       <div class="middle">middle</div>
       <div class="right">right</div>
   </div>
   <style type="text/css">
       .container{
           display: flex;
       }
       .left,.right{
           width: 200px;
           background-color: red;
       }
       .middle{
           flex: 1;
           background-color: green;
       }
   </style>
   

3. 右侧定宽，左侧自适应

   <div class="right">right</div>
   <div class="left">left</div>
   <style type="text/css">
       .left{
           margin-right: 200px;
           background-color: green;
       }
       .right{
           width: 200px;
           background-color: red;
           float: right;
       }
   </style>
   

   flex

   <div class="container">
       <div class="left">left</div>
       <div class="right">right</div>
   </div>
   <style type="text/css">
       .container{
           display: flex;
       }
       .left{
           flex: 1;
           background-color: green;
       }
       .right{
           width: 200px;
           background-color: red;
       }
   </style>
   

4. 上中下，左中右

   <div class="top">top</div>
   <div class="center">
       <div class="left">left</div>
       <div class="right">right</div>
       <div class="middle">middle</div>
   </div>
   <div class="bottom">bottom</div> 
   <style type="text/css">
       .top{
           position: absolute;
           width: 100%;
           height: 100px;
           top:0;
           left: 0;
           right:0;
           background: red;
       }
       .center{
           position: absolute;
           top:100px;
           bottom:100px;
           width: 100%px;
           height: auto;
           left:0;
           right:0;
       }
       .left{
           width: 100px;
           height:100%;
           background: green;
           float: left;
       }
       .right{
           width: 100px;
           height:100%;
           background:green;
           float: right;
       }
       .middle{
           margin: 0 100px;
           height:100%;
           background:yellow;
       }
       .bottom{
           position:absolute;
           bottom: 0;
           left: 0;
           right:0;
           height: 100px;
           width: 100%;
           background: red;
       }
   </style>
   

   flex

   <div class="container">
       <div class="top">top</div>
       <div class="center">
           <div class="left">left</div>
           <div class="middle">middle</div>
           <div class="right">right</div>
       </div>
       <div class="bottom">bottom</div>
   </div>
   <style type="text/css">
       body,html{
           height: 100%;
           font-size:10px;
           padding: 0;
           margin: 0;
       }
       .container{
           display: flex;
           flex-direction: column;
           height: 100%;
       }
       .top{
           width: 100%;
           height:100px;
           background: red;
           font-size: 2rem;
       }
       .center{
           display: flex;
           width: 100%;
           flex: 1;
       }
       .left{
           width: 100px;
           background: green;
       }
       .middle{
           flex: 1;
           background: yellow;
       }
       .right{
           width: 100px;
           background: green;
       }
       .bottom{
           width: 100%;
           height:100px;
           background: red;
       }
   </style>
   

5. 元素居中

   已知宽高

   <div class="container">
       <div class="box"></div>
   </div>
   <style type="text/css">
       .container{
           width: 400px;
           height: 400px;
           position: relative;
           background-color: red;
       }
       .box{
           width: 200px;
           height: 200px;
           position: absolute;
           background-color: green;
           left: 50%;
           top: 50%;
           margin-left: -100px;
           margin-top: -100px;
       }
   </style>
   

   未知宽高

   <div class="container">
       <div class="box"></div>
   </div>
   <style type="text/css">
       .container{
           width: 400px;
           height: 400px;
           position: relative;
           background-color: red;
       }
       .box{
           width: 200px;
           height: 200px;
           position: absolute;
           background-color: green;
           left: 50%;
           top: 50%;
           transform: translate(-50%, -50%);
       }
   </style>
   

   flex

   <div class="container">
       <div class="box"></div>
   </div>
   <style type="text/css">
       .container{
           width: 400px;
           height: 400px;
           display: flex;
           justify-content: center;
           align-items: center;
           background-color: red;
       }
       .box{
           width: 200px;
           height: 200px;
           background-color: green;
       }
   </style>
   

   或：

   .container{
       width: 400px;
       height: 400px;
       display: flex;
       justify-content:center;
       background-color: red;
   }
   .box{
       align-self: center;
       background-color: green;
   }
   

   或

   .container{
       width: 400px;
       height: 400px;
       display: flex;
       background-color: red;
   }
   .box{
       width: 200px;
       height: 200px;
       background-color: green;
       margin: auto;
   }