css左右两列/左中右三列自适应布局

一、实现左边固定，右边自适应

使用margin，float实现：

1.先设置左边的宽度，让盒子左浮动；
2.设置右边的盒子，margin-left: 左边盒子的宽度。

<!-- 左边固定，右边自适应 -->
  <div class="content">
    <div class="left"></div>
    <div class="right">12</div>
  </div>

.left{
      width: 400px;
      height: 400px;
      background-color: blue;
      float: left;
    }
.right{
      margin-left: 400px;
      height: 400px; // 高度可以忽略 这里我用来看效果
      background-color: green;
}

二、实现右边固定，左边自适应

1.使用margin，float实现

1.把右边的盒子放在前面；左边的盒子放在后面
2.设置右边的盒子的宽度，让右边的盒子右浮动
3.此时左边的盒子就布满了整个父盒子，使用margin-right：右边的盒子宽度值

 <div class="content">
      <div class="right">右边</div>
      <div class="left"></div>
    </div>
.right {
        width: 400px;
        background-color: green;
        float: right;
}
 
.left {
        background-color: blue;
        margin-right: 400px;
}

2.使用弹性布局，flex实现

1.父盒子设置display:flex;
2.左边的盒子flex:1,
3.右边的盒子右浮动；

 <div class="content">
      <div class="left"></div>
      <div class="right">右边</div>
  </div>
 .content {
        display: flex;
         }
 .left {
        background-color: blue;
        flex: 1;
        }
 .right {
        width: 400px;
        height: 150px;
        background-color: green;
        float: right;
  } 

三、左右两侧均自适应不固定

1.百分比控制

父元素设置auto居中显示

左右两侧按照百分比设置，总宽度不超过100%

 <div class="content">
      <div class="left"></div>
      <div class="right">右边</div>
  </div>
 .content {
        margin: 5px auto;
         }
 .left {
       border: 1px solid #d9d5d5;
       width: 20%;
       float: left;
       margin-left: 7px;
        }
 .right {
         width: 77%;
         float: right;
         margin-right: 7px;
  } 

2.flex：1弹性布局

父元素display: flex;

子元素flex：1

 <div class="content">
      <div class="all left"></div>
      <div class="all right">右边</div>
  </div>
  .all {
      flex: 1;
  }
 .left {
    width: 20%;
    min-width: 210px;
    max-width: 250px;
  }
 .right {
      width: 90%;
      margin-left: 20px;
      min-width: 900px;
  } 

四、左右固定，中间自适应

1.弹性flex布局

父弹性（display: flex;）
左右正常写，中间flex: 1;就行了
 

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


<style>
    .box {
      display: flex;
      height: 500px;
    }

    .left {
      width: 220px;
      height: 500px;
      background-color: pink;
    }

    .main {
      flex: 1;
      height: 500px;
      background-color: blue;
    }

    .right {
      width: 220px;
      height: 500px;
      background-color: yellow;
    }
  </style>

2.浮动float布局

有点坑，html方面，必须中间在最后，不然右边就会挤下来，原因是因为dom的渲染机制的问题，
css方面左边左浮动，右边右浮动，中间margin: 0 220px;把脱标的左边盒子挤开就行

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

<style>
    .box{
      height: 500px;  //塌陷
    }
    .left {
      width: 220px;
      height: 500px;
      background-color: pink;
      float: left;
    }
    .main {
      margin: 0 220px;
      height: 500px;
      background-color: blue;
    }
    .right {
      width: 220px;
      height: 500px;
      background-color: yellow;
      float: right;
    }
</style>

3.定位position布局

父相子绝，左子盒子left: 0; top: 0，右子盒子top: 0; right: 0;

中间老规矩margin: 0 220px;把脱标盒子挤开就行

 

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

 <style>
    .box{
      position: relative;
    }
    .left {
      width: 220px;
      height: 500px;
      background-color: pink;
      position: absolute;
      left: 0;
      top: 0
    }
    .main {
      margin: 0 220px;
      height: 500px;
      background-color: blue;
    }
    .right {
      width: 220px;
      height: 500px;
      background-color: yellow;
      float: right;
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>