实现左侧固定宽度, 右侧自适应的两栏布局的八种方案

喜欢ヅ旅行 2023-03-01 09:55 33阅读 0赞

### HTML ###

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Static Template</title>
        <link rel="stylesheet" href="./index.css" />
      </head>
      <body>
        <div id="box">
          <div id="left"></div>
          <div id="right"></div>
        </div>
        <div id="box2"></div>
      </body>
    </html>

### 方案一：左侧固定宽度，右侧flex自适应 ###

#box { 
      width: 100%;
      height: 400px;
      display: flex;
    }
    #left { 
      width: 100px;
      height: 100%;
      background-color: lightgreen;
    }
    #right { 
      flex: 1;
      background-color: lightblue;
    }
    
    #box2 { 
      width: 500px;
      height: 500px;
      background-color: plum;
    }

### 方案二：左侧浮动，右侧设置宽度100%，占据左侧普通流位置 ###

#box { 
      width: 100%;
      height: 400px;
      background-color: #aaaaaa;
    }
    #left { 
      width: 100px;
      height: 100%;
      float: left;
      background-color: lightgreen;
    }
    #right { 
      width: 100%;
      height: 100%;
      background-color: lightblue;
    }
    
    #box2 { 
      width: 500px;
      height: 500px;
      background-color: plum;
    }

### 方案三：左侧固定宽度左浮动，右侧设margin-left等于左侧宽度 ###

#box { 
      width: 100%;
      height: 400px;
      background-color: #aaaaaa;
    }
    #left { 
      width: 100px;
      height: 100%;
      background-color: lightgreen;
      float: left;
    }
    #right { 
      width: calc(100% - 100px);
      margin-left: 100px;
      height: 100%;
      background-color: lightblue;
    }
    
    #box2 { 
      width: 500px;
      height: 500px;
      background-color: plum;
    }

### 方案四：左侧固定宽度、固定定位，右侧宽度100% ###

#box { 
      width: 100%;
      height: 400px;
      background-color: #aaaaaa;
      position: relative;
    }
    #left { 
      width: 100px;
      height: 100%;
      background-color: lightgreen;
      position: absolute;
      top: 0;
      left: 0;
    }
    #right { 
      width: 100%;
      height: 100%;
      background-color: lightblue;
    }
    
    #box2 { 
      width: 500px;
      height: 500px;
      background-color: plum;
    }

### 方案五：左侧宽度固定、固定定位，右侧左边距等于左侧宽度： ###

#box { 
      width: 100%;
      height: 400px;
      background-color: #aaaaaa;
      position: relative;
    }
    #left { 
      width: 100px;
      height: 100%;
      background-color: lightgreen;
      position: absolute;
      top: 0;
      left: 0;
    }
    #right { 
      width: calc(100% - 100px);
      margin-left: 100px;
      height: 100%;
      background-color: lightblue;
    }
    
    #box2 { 
      width: 500px;
      height: 500px;
      background-color: plum;
    }

### 方案六：双左浮动，右侧计算属性计算宽度 ###

#box { 
      width: 100%;
      height: 400px;
      background-color: #aaaaaa;
    }
    #left { 
      width: 100px;
      height: 100%;
      background-color: lightgreen;
      float: left;
    }
    #right { 
      width: calc(100% - 100px);
      height: 100%;
      float: left;
      background-color: lightblue;
    }
    
    #box2 { 
      width: 500px;
      height: 500px;
      background-color: plum;
    }

### 方案七：左侧左浮，右侧右浮动，右侧计算宽度： ###

#box { 
      width: 100%;
      height: 400px;
      background-color: #aaaaaa;
    }
    /* #box::after { content: " "; display: block; clear: both; } */
    #left { 
      width: 100px;
      height: 100%;
      background-color: lightgreen;
      float: left;
    }
    #right { 
      width: calc(100% - 100px);
      float: right;
      height: 100%;
      background-color: lightblue;
    }
    
    #box2 { 
      width: 500px;
      height: 500px;
      background-color: plum;
    }

### 方案八：左侧固定宽度，`display:inline-block`，右侧右浮动，计算宽度 ###

#box { 
      width: 100%;
      height: 400px;
      background-color: #aaaaaa;
    }
    /* #box::after { content: " "; display: block; clear: both; } */
    #left { 
      width: 100px;
      height: 100%;
      background-color: lightgreen;
      display: inline-block;
    }
    #right { 
      width: calc(100% - 100px);
      float: right;
      height: 100%;
      background-color: lightblue;
    }
    
    #box2 { 
      width: 500px;
      height: 500px;
      background-color: plum;
    }