Make This Work (CSS)

[jasonliao]

classic css layout implementation

[jasonliao]

水平垂直居中

1. 使用绝对布局

   <div class="modal"></div>

   div {
     width: 500px;
     height: 300px;
     background: #abcdef;
   }
   
   .modal {
     position: absolute;
     left: 50%;
     top: 50%;
     margin-left: -250px;
     margin-top: -150px;
   }

   这个方法需要知道块的长宽，下面这个方法则不需要，但仍然是使用绝对布局

   .modal {
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     margin: auto;
   }

   使用绝对布局的还有一个方法，但是要配合 css3 使用，同样是不需要知道块的长宽

   .modal {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
   }

2. 使用 flex 布局

   使用 flex 布局需要在居中块的外层再加一层 div，并设置高度为屏幕的高度，当然你可以把这一层用 body 来代替

   <div class="modal-container">
     <div class="modal"></div>
   </div>

   .modal-container {
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   
   .modal {
     width: 500px;
     height: 300px;
     background: #abcdef;
   }

[jasonliao]

左定宽 右适应

1. 使用 float 和 margin

   <div class="left"></div>
   <div class="right"></div>

   div {
     height: 300px;
   }
   
   .left {
     background: pink;
     width: 200px; /* 左定宽的宽度 */
     float: left;
   }
   
   .right {
     background: #abcdef;
     margin-left: 200px; /* 左定宽的宽度  */
   }

2. 使用 flex 布局

   <div class="flex">
     <div class="left"></div>
     <div class="right"></div>
   </div>

   .flex {
     display: flex;
   }
   
   .left {
     background: pink;
     width: 200px;
     height: 300px;
   }
   
   .right {
     background: #abcdef;
     height: 300px;
     flex-grow: 1;
   }

3. 使用 grid 布局

   <div class="grid">
     <div class="left"></div>
     <div class="right"></div>
   </div>

   .grid {
     display: grid;
     grid: 200px 1fr / 300px;
   }
   
   .left {
     background: pink;
   }
   
   .right {
     background: #abcdef;
   }

[jasonliao]

左右定宽 中间适应

1. float 和 margin

   <div class="left"></div>
   <div class="right"></div>
   <div class="center"></div>  <!-- 一定要放在最后 -->

   .left {
     background: pink;
     width: 200px;
     height: 300px;
     float: left;
   }
   
   .right: {
     background: #abcdef;
     width: 200px;
     height: 300px;
     float: right;   
   }
   
   .center {
     background: yellow;
     height: 300px;
     margin: 0 200px 0 200px;
   }

2. 使用 BFC 则不需要使用 margin

   <div class="left"></div>
   <div class="right"></div>
   <div class="center"></div>  <!-- 也一定要放在最后 -->

   .left {
     background: pink;
     width: 200px;
     height: 300px;
     float: left;
   }
   
   .right: {
     background: #abcdef;
     width: 200px;
     height: 300px;
     float: right;   
   }
   
   .center {
     background: yellow;
     height: 300px;
     overflow: hidden;
   }

3. 双飞翼布局

   <div class="center-contain">
     <div class="center"></div>
   </div>
   <div class="left"></div>
   <div class="right"></div>

   .center-contain {
     background: yellow;
     width: 100%;
     height: 300px;
     float: left;
   }
   
   .left {
     background: pink;
     width: 200px;
     height: 300px;
     position: relative;
     margin-left: -100%;
     float: left;
   }
   
   .right: {
     background: #abcdef;
     width: 200px;
     height: 300px;
     position: relative;
     margin-left: -200px;
     float: left;   
   }
   
   .center {
     margin: 0 200px 0 200px;
   }

4. 使用 flex 布局

   <div class="flex">
     <div class="left"></div>
     <div class="center"></div>
     <div class="right"></div>
   </div> 

   .flex {
     display: flex;
   }
   
   .left {
     background: pink;
     width: 200px;
     height: 300px;
   }
   
   .right: {
     background: #abcdef;
     width: 200px;
     height: 300px;
   }
   
   .center {
     background: yellow;
     height: 300px;
     flex-grow: 1;
   }

5. 使用 grid 布局

   <div class="grid">
     <div class="left"></div>
     <div class="center"></div>
     <div class="right"></div>
   </div>

   .grid {
     display: grid;
     grid: 200px 1fr 200px / 300px;
   }
   
   .left {
     background: pink;
   }
   
   .right {
     background: #abcdef;
   }
   
   .center {
     background: yellow;
   }