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>