实现三栏布局的三种方法

标签

<div class="box">
    <div class="box_left"></div>
    <div class="box_right"></div>
    <div class="box_content"></div>
  </div>

方法一  overflow

.box{
      width: 100%;
      height: 100vh;
      background: rgb(88, 144, 196);
    }
    .box_left{
      width: 200px;
      height: 100vh;
      background: rgb(186, 201, 103);
      float: left;
    }
    .box_right{
      width: 200px;
      height: 100vh;
      background: rgb(108, 189, 125);
      float: right;;
    }
    .box_content{
      height: 100vh;
      overflow:hidden;
      background: rgb(212, 173, 44);
    }

标签

<div class="box">
    <div class="box_left"></div>
    <div class="box_content"></div>
    <div class="box_right"></div>
  </div>

 

方法二  position

.box{
      width: 100%;
      height: 100vh;
      position: relative;
      background: rgb(88, 144, 196);
    }
    .box_left{
      width: 200px;
      height: 100vh;
      background: rgb(186, 201, 103);
      float: left;
    }
    .box_right{
      width: 200px;
      height: 100vh;
      background: rgb(108, 189, 125);
      float: right;;
    }
    .box_content{
      height: 100vh;
      position: absolute;
      left: 200px;
      right: 200px;
      background: rgb(212, 173, 44);
    }

 

方法三 flex

.box{
      width: 100%;
      height: 100vh;
      display: flex;
      background: rgb(88, 144, 196);
    }
    .box_left{
      width: 200px;
      height: 100vh;
      background: rgb(186, 201, 103);
    }
    .box_right{
      width: 200px;
      height: 100vh;
      background: rgb(108, 189, 125);
    }
    .box_content{
      height: 100vh;
      flex:1;
      background: rgb(212, 173, 44);
    }

效果（左右宽度固定，中间自适应）