三栏布局

发表于 | 更新于 | 分类于

负边距在让元素产生偏移和 position:relative的区别

负margin会使相邻的浮动元素后inline-block元素产生偏移，而position:relative则不会影响。

使用负margin形成三栏布局的条件？

  • 三栏全部浮动。
  • 渲染顺序为中左右。
  • 左右栏宽度固定。

圣杯布局

使用负margin使浮动元素上移，父容器加padding实现。

  1. 设置三栏元素浮动；
  2. 用负margin是左右两栏上移，左边栏margin-left设置-100%，右边栏设置margin-left为负的自身宽度。
  3. 父容器设置padding为左右两栏固定宽度，使父容器撑大。
  4. 使用position:relative调整左右两栏位置。

圣杯两栏布局

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html> 
  <head>
    <meta charset="utf-8">
    <title>圣杯两栏布局</title>
    <style type="text/css">
      html,body{
        margin: 0;
        padding: 0;
      }
      body{
        font-family: '微软雅黑';
      }
      #header,#footer{
        height: 30px;
        background-color: #ccc;
      }
      .clearfix:after{
        content: '';
        display: block;
        clear: both;
      }
      .aside{
        width: 200px;
        height: 300px;
        background-color: red;
        float: left;
        margin-left: -100%;
        position: relative;
        left: -200px;
      }
      .main{
        background-color: green;
        float: left;
      }
      #content{
        padding: 0 0 0 200px;
      }
      .btn-ct{
        height: 130px;
        text-align: center;
        padding: 30px 10px 10px 10px;
      }
      .btn-ct p{
        font-size: 25px;
      }
      .btn-ct .btn{
        padding: 10px 10px;
        border-radius: 4px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="header">头部</div>
    <div id="content" class="clearfix">
      <div class="main">
        圣杯布局值两边顶宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。参
        考：<a href="#">圣杯布局原理。</a>其流程为：1）设置container的左右padding，用于预留
        左右边栏的空间。2）给所有元素设置浮动和定位，用于设置左右两栏偏移；3）给左边栏设置right，
        让其移动位置，设置负边距100%（#centent的宽度）让其跑到上面，4）给右边栏设置负边距让其
        跑到上边。
      </div>
      <div class="aside">
        左侧边栏，宽度固定
      </div>
    </div>
    <div id="footer">尾部</div>
  </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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<style type="text/css">
      html,body{
        margin: 0;
        padding: 0;
      }
      body{
        font-family: '微软雅黑';
      }
      #header{
        height: 30px;
        background-color: #ccc;
      }
      #footer{
        height: 30px;
        background-color: #ccc;
      }
      #content:after{
        content:'';
        display: block;
        clear: both;
      }
      #content{
        padding: 0 200px;
      }
      .left{
        width: 200px;
        height: 300px;
        float: left;
        background-color: red;
        margin-left: -100%;
        position: relative;
        left: -200px;

      }
      .main{
        float: left;
        background-color: green;

      }
      .right{
        height: 300px;
        width: 200px;
        float: left;
        background-color: yellow;
        margin-left: -200px;
        position: relative;
        left: 200px;
      }
      .btn-ct{
        height: 130px;
        text-align: center;
        padding: 30px 10px 10px 10px;
      }
      .btn-ct p{
        font-size: 25px;
      }
      .btn-ct .btn{
        padding: 10px 10px;
        border-radius: 4px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="header">
      头部
    </div>
    <div id="content">
      <div class="main">
        <p>
          圣杯布局值两边顶宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。参
          考：<a href="#">圣杯布局原理。</a>其流程为：1）设置container的左右padding，用于预留
          左右边栏的空间。2）给所有元素设置浮动和定位，用于设置左右两栏偏移；3）给左边栏设置right，
          让其移动位置，设置负边距100%（#centent的宽度）让其跑到上面，4）给右边栏设置负边距让其
          跑到上边。
        </p>
      </div>
      <div class="left">
        <p>左侧边栏，宽度固定。</p>
      </div>
      <div class="right">
        <p>右侧边栏，宽度固定。</p>
      </div>
    </div>
    <div id="footer">
      尾部
    </div>
  </body>

渲染为:

双飞翼布局

在圣杯布局的基础上，不再设置父容器padding撑开宽度，在中间栏建一个字div，设置盒子的margin实现。

  1. 设置三栏元素浮动；
  2. 用负margin是左右两栏上移，左边栏margin-left设置-100%，右边栏设置margin-left为负的自身宽度。
  3. 在主栏里面再加上一个子div。在子div里面设置左右margin的值(大于等于左右两栏的宽度) 。

双飞翼两栏

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>双飞翼两栏布局</title>
    <style type="text/css">
      html,body{
        margin: 0;
        padding: 0;
      }
      body{
        font-family: '微软雅黑';
      }
      #header,#footer{
        height: 30px;
        background-color: #ccc;
      }
      .main{
        float: left;
        width: 100%;
      }
      .wrap{
        margin-right: 200px;
        background-color: green;
      }
      .ad{
        float: left;
        width: 200px;
        height: 150px;
        background-color: yellow;
        margin-left: -200px;
      }
      #content:after{
        content:'';
        display: block;
        clear: both;
      }
      .btn-ct{
        height: 130px;
        text-align: center;
        padding: 30px 10px 10px 10px;
      }
      .btn-ct p{
        font-size: 25px;
      }
      .btn-ct .btn{
        padding: 10px 10px;
        border-radius: 4px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="header">头部</div>
    <div id="content">
      <div class="main">
        <div class="wrap">
        双飞翼布局指两边顶宽，中间自适应的三栏布局，中间流要放在文档前面以优先渲染。
        </div>
      </div>
      <div class="ad">
        右侧边栏，固定宽度
      </div>
    </div>
    <div id="footer">尾部</div>
  </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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>双飞翼三栏布局</title>
    <style type="text/css">
      html,body{
        margin: 0;
        padding: 0;
      }
      body{
        font-family: '微软雅黑';
      }
      #header,#footer{
        height: 30px;
        background-color: #ccc;
      }
      .main{
        float: left;
        width: 100%;
      }
      .wrap{
        margin: 0 200px;
        background-color: green;
      }
      .aside{
        float: left;
        width: 200px;
        height: 150px;
        background-color: red;
        margin-left: -100%;

      }
      .ad{
        float: left;
        width: 200px;
        height: 150px;
        background-color: yellow;
        margin-left: -200px;
      }
      #content:after{
        content:'';
        display: block;
        clear: both;
      }
      .btn-ct{
        height: 130px;
        text-align: center;
        padding: 30px 10px 10px 10px;
      }
      .btn-ct p{
        font-size: 25px;
      }
      .btn-ct .btn{
        padding: 10px 10px;
        border-radius: 4px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="header">头部</div>
    <div id="content">
      <div class="main">
        <div class="wrap">
        双飞翼布局指两边顶宽，中间自适应的三栏布局，中间流要放在文档前面以优先渲染。
        </div>
      </div>
      <div class="aside">
        左侧边栏，固定宽度
      </div>
      <div class="ad">
        右侧边栏，固定宽度
      </div>
    </div>
    <div id="footer">尾部</div>
  </body>
</html>

渲染为：