【css】css实现布局： 左：200px，右：30%，中：自适应

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/AC_greener/article/details/84201605

题目来源于今日头条一面，当时想的不全，现在总结一下

第一种方法：浮动布局

 <style>
    body {
      padding:50px;
    }
    * {
      box-sizing: border-box;
    }
    .clearfix::after {
      content: '';
      display: block;
      clear: both
    }
    .parent {
      width: 100%;
      border: 1px solid red
    }
    .parent > div {
      float: left;
    }
    .left {
      width: 200px;
      background-color: aqua;
    }
    .right {
      width: 30%;
      background-color:blue;
    }
    .center {
      width: calc(70% - 200px);
      background-color:brown;
    }
  </style>
 <div class="parent clearfix">
    <div class="left">
      left
    </div>
    <div class="center">
      center
    </div>
    <div class="right">
        right
    </div>
  </div>

效果图：

第二种方法：绝对定位

  <style>
    body {
      padding:50px;
    }
    * {
      box-sizing: border-box;
    }
    .parent {
      width: 100%;
      border: 1px solid red;
      position: relative;
    }
    .left {
      position: absolute;
      width: 200px;
      left: 0;
      background-color: aqua;
    }
    .right {
      position: absolute;
      width: 30%;
      right: 0;
      background-color:blue;
    }
    .center {
      position: absolute;
      left: 200px;
      right: 30%;
      background-color:brown;
    }

第三种：flex布局

<style>
    body {
      padding:50px;
    }
    * {
      box-sizing: border-box;
    }
    .parent {
      width: 100%;
      border: 1px solid red;
      display: flex;
    }
    .left {
      width: 200px;
      background-color: aqua;
    }
    .right {
      width:  30%;
      background-color:blue;
    }
    .center {
      flex: 1;
      background-color:brown;
    }
  </style>

第四种 grid布局

 body {
      padding:50px;
    }
    * {
      box-sizing: border-box;
    }
    .parent {
      width: 100%;
      border: 1px solid red;
      display: grid;
      grid-template-columns: 200px auto 30%;
    }
    .left {
      background-color: aqua;
    }
    .right {
      background-color:blue;
    }
    .center {
      background-color:brown;
    }

效果：