要求

左边宽度固定，右边自适应

定位,margin 负值等等方法不讲,因为 BFC 和 flex 都已经很完美解决两列布局

BFC

BFC 的区域不会与 float box 重叠。
步骤:

  1. body{min-width: 600px;}
  2. div{height: 200px;}
  3. #left{width: 200px;float: left;}
  4. #right{overflow: hidden;}

浮动

只需要#left{width: 200px;float: left;} 缺点: right 有一部分在 left 下,背景图,padding-left 等等都会受影响

flex

  1. #content{display: flex;}
  2. #left{flex-shrink: 0;width: 200px;}
  3. #right{flex-shrink: 1;flex-grow: 1;}

完美!!!

grid

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <section class="layout grid">
      <style>
        .layout.grid .left-center-right {
          display: grid;
          width: 100%;
          grid-template-rows: auto;
          grid-template-columns: 300px auto;
          grid-template-areas: 'left right';
        }

        .layout.grid .left {
          background: red;
          grid-area: left;
        }

        .layout.grid .right {
          background: blue;
          grid-area: right;
        }
      </style>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="right"></div>
      </article>
    </section>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

兼容性不好

TOC