要求

  1. 两边固定宽度,当中宽度自适应
  2. 当中列要完整(显示 body 给个最小宽度)
  3. 当中列要优先加载(中间列在 HTML 前面)
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
1
2
3

方法

定位

* {
  margin: 0;
  padding: 0;
}
body {
  /*2*left+right,既是中间列至少给个left或right的值*/
  min-width: 600px;
  position: relative;
}
div {
  height: 100px;
}
#left,
#right {
  width: 200px;
  background: pink;
}
#middle {
  background: deeppink;
  padding: 0 200px;
}
#left {
  position: absolute;
  left: 0;
  top: 0;
}
#right {
  position: absolute;
  right: 0;
  top: 0;
}
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 一定要设置 position: relative,

缺点:

  • 绝对定位脱离标准文档流,对以后的布局不好,
  • 必须有个容器,加上相对定位,
  • 提升层级,对以后我们布局带来极大的困扰

浮动(当中列不能优先加载)

* {
  margin: 0;
  padding: 0;
}
body {
  /*2*left+right*/
  min-width: 600px;
}
div {
  height: 100px;
}
#left,
#right {
  width: 200px;
  background: pink;
}
#left {
  float: left;
}
#right {
  float: right;
}
#middle {
  background: deeppink;
}
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

浮动提升半级,把 middle 文字顶过去. 缺点:

  • 脱离标准文档流,对以后的布局不好,
  • 当中列不能优先加载

圣杯布局

* {
  margin: 0;
  padding: 0;
}
body {
  min-width: 600px;
}
#content {
  padding: 0 200px;
}
#content .middle {
  float: left;
  width: 100%;
  background: pink;
  /*padding: 0 200px;*/
}
#content .left {
  position: relative;
  left: -200px;
  margin-left: -100%;
  float: left;
  width: 200px;
  background: yellow;
}
#content .right {
  position: relative;
  right: -200px;
  margin-left: -200px;
  float: left;
  width: 200px;
  background: yellow;
}
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}
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
36
37
38
39
40
<div id="content" class="clearfix">
  <div class="middle">
    <h4>middle</h4>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
1
2
3
4
5
6
7

步骤:

  1. #middle{float: left;width: 100%;}
  2. #left 和#right{float: left;width: 200px;}
  3. #left{margin-left: -100%;}和#right{margin-left: -200px;}
  4. body{min-width: 600px;}
  5. #content{padding: 0 200px;}
  6. #left{position: relative;left: -200px}和#right{position: relative;right: -200px}

缺点:

  • 脱离标准文档流,对以后的布局不好,
  • 中间列高度越来越高时,左右列高度不会一起增高,三列高度不一致,UI 丑

伪等高布局

步骤:

  1. #content{overflow: hidden;}
  2. #content #middl,#content #left,#content #right{padding-bottom: 10000px;margin-bottom: -10000px;}
  3. 其他步骤和圣杯布局相同

双飞翼布局

<div id="content">
  <div class="middle">
    <div class="m_inner">
      middle
    </div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
1
2
3
4
5
6
7
8
9

步骤:

  1. 1.2.3.4.和圣杯相同
  2. 5.#content .middle .m_inner{padding: 0 200px;} 缺点,布局用到定位
  3. 三列的伪等高布局
#content .middle,
#content .left,
#content .right {
  /*padding-bottom:10000px ;
		margin-bottom: -10000px;*/
  height: 50px;
  line-height: 50px;
  float: left;
}
1
2
3
4
5
6
7
8
9

缺点,高度写死

flex

body {
  min-width: 600px;
}
#content {
  overflow: hidden;
  display: flex;
}
#content .middle,
#content .left,
#content .right {
  padding-bottom: 10000px;
  margin-bottom: -10000px;
}

#content .middle {
  width: 100%;
  background: pink;
  order: 2;
  flex-shrink: 1;
  word-break: break-all;
}

#content .left {
  order: 1;
  width: 200px;
  background: yellow;
  flex-shrink: 0;
  order: 1;
}

#content .right {
  width: 200px;
  background: yellow;
  flex-shrink: 0;
  order: 3;
}
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
36

完美!!!

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 300px;
          grid-template-areas: 'left center right';
        }

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

        .layout.grid .center {
          background: yellow;
          grid-area: center;
        }

        .layout.grid .right {
          background: blue;
          grid-area: right;
        }
      </style>
      <article class="left-center-right">
        <div class="center">
          <h1>grid</h1>
        </div>
        <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
36
37
38
39
40
41
42
43

兼容性不好

table(当中列不能优先加载)

不能实现中间列优先加载

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

  <body>
    <section class="layout table">
      <style>
        .layout.table .left-center-right {
          width: 100%;
          display: table;
        }

        .layout.table .left-center-right > div {
          display: table-cell;
        }

        .layout.table .left {
          width: 300px;
          background: red;
        }

        .layout.table .center {
          background: yellow;
        }

        .layout.table .right {
          width: 300px;
          background: blue;
        }
      </style>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h1>table</h1>
        </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
36
37
38
39
40
41
42
43

TOC