总结css实现三栏布局的几种解决方案

总结css实现三栏布局的几种解决方案

参考：前端经典面试题CSS三栏布局
实现以上布局，其中content中为左边定宽300右边定宽300且中间自适应宽度的三栏布局。

<div class="panel">
    <div class="header">header</div>
    <div class="main">
       <div class="sidebar">sidebar</div>
       <!-- content中left和right定宽，center定宽实现三栏布局，center优先加载时解决方案？ -->
       <div class="content">
         <div class="content-left">left定宽300</div>
         <div class="content-center">center自适应</div>
         <div class="content-right">right定宽300</div>
       </div>
     </div>
      <div class="footer">footer</div>
  </div>

    .panel {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
      .header {
        height: 70px;
        width: 100%;
        background-color: #c42828
      }
      .main {
        width: 100%;
        height: calc(100% - 140px);
        background-color: rgb(65, 136, 222);
        display: flex;
      }
      .sidebar {
        width: 200px;
        height: 100%;
        background-color: rgb(82, 131, 5)
      }
      .footer {
        height: 70px;
        width: 100%;
        background-color: rgb(128, 27, 42)
      }

      /*1: 浮动+calc div按顺序加载 无法解决center优先加载的方案*/
      /* .content {
        width: 100%;
        height: 100%;
      }
      .content div {
        float: left;
      }
      .content-left {
        width: 300px;
        height: 100%;
        background-color: rgb(159, 158, 23)
      }
      .content-right {
        width: 300px;
        height: 100%;
        background-color: rgb(159, 158, 23)
      }
      .content-center {
        width: calc(100% - 600px)
      } */


      /* 2:自身浮动  center要写在三个div的最后，无法解决center优先加载*/
      /* .content {
        flex: 1;
        width: 100%;
        height: 100%;
      }
      .content-left {
        float: left;
        width: 300px;
        height: 100%;
        background-color: rgb(159, 158, 23)
      }
      .content-right {
        float: right;
        width: 300px;
        height: 100%;
        background-color: rgb(159, 158, 23)
      }
      .content-center {
        margin:0 300px 0 300px;
        height: 100%;
        background-color: rgb(182, 51, 76)
      } */



      /* 3：使用flex,想要center优先加载时,center写在三个div最前面,给left设置order:-1,此时left就会跑到布局的最前面。order:-1只在父元素设置flex时才起效*/
      /* .content {
        width: 100%;
        height: 100%;
        display: flex;
      }
      .content-left {
        width: 300px;
        height: 100%;
        background-color: rgb(159, 158, 23);
        order:-1
      }
      .content-right {
        width: 300px;
        height: 100%;
        background-color: rgb(159, 158, 23)
      }
      .content-center {
        flex:1
      } */



     /* 4:浮动加定位 div中center写在left前面，解决优先加载center的方案*/
      /* .content {
        flex: 1;
        width: 100%;
        height: 100%;
        padding: 0 300px 0 300px
      }
      .content div {
        float: left;
      }
      .content-left {
        width: 300px;
        position: relative;
        margin-left: -100%;
        height: 100%;
        left: -300px;
        background-color: rgb(159, 158, 23)
      }
      .content-right {
        width: 300px;
        position: relative;
        margin-left: -300px;
        height: 100%;
        right: -300px;
        background-color: rgb(159, 158, 23)
      }
      .content-center {
        width: 100%;
        height: 100%;
        background-color: rgb(182, 51, 76)
      } */


      /* 5:浮动设置magin、padding,div中center写在left前面，且center中新加inner盒子。解决优先加载center的方案*/
      /* .content {
        flex: 1;
        width: 100%;
        height: 100%;
      }
      .content div {
        float: left;
      }
      .content-left {
        width: 300px;
        margin-left: -100%;
        height: 100%;
        background-color: rgb(159, 158, 23)
      }
      .content-right {
        width: 300px;
        margin-left: -300px;
        height: 100%;
        background-color: rgb(159, 158, 23)
      }
      .content-center {
        width: 100%;
        height: 100%;
        background-color: rgb(182, 51, 76)
      }
      .inner {
        padding: 0 300px 0 300px
      } */