两栏布局

基础部分

1
2
3
4
<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
1
2
3
4
5
6
7
8
9
10
.left, .right {
    height: 150px;
}
.left {
    width: 100px;
    background-color: pink;
}
.right {
    background-color: aqua;
}

此时.left和.right各自独占一行

两栏布局-1

将.left和.right排成一行，有三种方法

  • 设置display为inline-block

    设置了 inline-block 的两个 div 之间会有间距

    1
    2
    3
    .left, .right {
        display: inline-block;
    }

    两栏布局-1

    可以通过font-size消除间隔，并在子元素中重新设置，同时设置.right宽度

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .container {
        font-size: 0;
    }
    .left, .right {
        height: 150px;
        display: inline-block;
        font-size: medium;
    }
    .left {
        width: 100px;
        background-color: pink;
    }
    .right {
        width: calc(100% - 105px);
        background-color: aqua;
    }

  • 使用float，有三种实现方式

    • 设置.left为 左浮动，同时设置.right的margin值

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      .container {
          overflow: hidden;
      }
      .left {
          float: left;
          width: 100px;
          background-color: pink;
      }
      .right {
          margin-left: 100px;
          background-color: aqua;
      }

    • 设置.left和.right均向左浮动，计算.right的宽度值

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      .container {
          overflow: hidden;
      }
      .left {
          float: left;
          width: 100px;
          background-color: pink;
      }
      .right {
          float: left;
          width: calc(100% - 100px);
          background-color: aqua;
      }

    • 设置.left向左浮动，让.right形成BFC，.right就不会和.left重合了。BFC不会忽视浮动元素。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      .container {
          overflow: hidden;
      }
      .left {
          float: left;
          width: 100px;
          background-color: pink;
      }
      .right {
          overflow: auto;
          background-color: aqua;
      }

  • 使用absolute

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .container {
        position: relative;
    }
    .left {
        width: 100px;
        background-color: pink;
        position: absolute;
    }
    .right {
        margin-left: 100px;
        background-color: aqua;
    }

最终结果

两栏布局-1

三栏布局

三栏布局主要是圣杯布局和双飞翼布局，两者都是两边固定宽度，中间自适应的三栏布局，并且主要内容要优先渲染，按照 DOM 从上至下的加载原则，中间的自适应部分要放在前面。

圣杯布局

基础框架

1
2
3
4
5
<div class="container">
  <div class="center"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body {
    min-width: 630px;
}
.center {
    width: 100%;
    height: 150px;
    background-color: #94E8FF;
}
.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
}

圣杯布局-1

样式调整

  • 设置左浮动

    1
    2
    3
    4
    5
    6
    .container {
      overflow: hidden;   /* 清除浮动 */
    }
    .center, .left, .right {
      float: left;
    }

    圣杯布局-2

  • 让.left和.right上去，因为 .center 的宽度是 100%，.left要回到.center的最左边，便是要向左移动.center的宽度，即100%，.left移动了之后，.right会自动补上.left的空位，此时，.right想要达到.center的最右边，只需要向左移动它自己本身的宽度就可以了，即200px。

    1
    2
    3
    4
    5
    6
    .left {
        margin-left: -100%;
    }
    .right {
        margin-left: -200px;
    }

    圣杯布局-3

  • 此时.left、.right都覆盖在.center的上面。圣杯布局的做法是先设置父元素.container的padding属性，给.left、.right留出空间，两者需要的空间大小便是两者的宽度，然后只需将.left、.right分别向左向右拉到准备的空位就好了。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .container {
        padding-left: 100px;
        padding-right: 200px;
    }
    .left {
        position: relative;
        left: -100px;
    }
    .right {
        position: relative;
        right: -200px;
    }

    圣杯布局-4

双飞翼布局

双飞翼布局与圣杯布局的前部分一样，在给左右两边元素留出位置的思路有区别。圣杯布局是设置了父元素的padding留出空间，之后利用relative来归位。双飞翼则是多加了一个div，将中间自适应部分包裹起来，利用子div的margin来给左右元素留空间。

1
2
3
4
5
6
7
<div class="container">
  <div class="center-container">
    <div class="center">center</div>
  </div>
  <div class="left">left</div>
  <div class="right">left</div>
<div>
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
body {
    min-width: 630px;
}
.container {
    overflow: hidden;
}
.center-container {
    width: 100%;
    float: left;
}
.center-container .center {
    height: 150px;
    background-color: yellow;

    margin-left: 100px;        /* 新添加的属性 */
    margin-right: 200px;       /* 新添加的属性 */
}
.left {
    width: 100px;
    height: 150px;
    background-color: lightblue;
    float: left;
    margin-left: -100%;
}
.right {
    width: 200px;
    height: 150px;
    background-color: pink;
    float: left;
    margin-left: -200px;
}

圣杯布局-4

在圣杯布局中，无限缩小屏幕（假设没有设置 body 的最小宽度），当 .main 的宽度小于 .left 时，会出现布局错乱





主要参考：前端九部 - 入门者手册2019 - CSS 布局实践