CSS实现页⾯两列布局与三列布局的⽅法⽰例1. 使⽤BFC的原理实现
BFC的规则之⼀，就是BFC区域，不会与float box重叠，因此我们可以利⽤这⼀点来实现3列布局。
html代码如下
XML/HTML Code复制内容到剪贴板
1. <div class="left"></div>
2. <div class="right"></div>
3. <div class="main"></div>
css代码如下
CSS Code复制内容到剪贴板
1. .left {
2.  float: left;
3.  margin-right: 10px;
4.  width: 100px;
5.  height: 100px;
6.  background-color: orange;
7. }
8. .rightright {
9.  float: rightright;
10.  margin-left: 10px;
11.  width: 100px;
12.  height: 100px;
13.  background-color: orange;
14. }
15. .main {
16.  height: 100px;
17.  background-color: green;
18.  overflow: hidden;
19. }
2.双飞翼布局
这种布局⽅案最早由淘宝提出，主要为了主列能够被最先加载。
实现原理：
（1）让主列外⾯添加⼀个wrap，主列wrap，以及2⼦列都左浮动。
（2）设置主列wrap宽度为100%，将⼦列的margin-left设置为负值，让⼦列能够排列在左右两侧。
（3）这是主列的margin-left与margin-right⽐左右两列的宽度⼤⼀点，则可以设置出来主列与⼦列之间的间隙。html代码如下
XML/HTML Code复制内容到剪贴板
1. <div class="wrap">
2.  <div class="main-content">
3.    <div class="main"></div>
4.  </div>
5.  <div class="left"></div>
6.  <div class="right"></div>
7. </div>
css代码如下
CSS Code复制内容到剪贴板
1. .wrap {
2.  width: 100%;
3. }
4. .wrap::after {
5.  display: block;
6.  content: '';
7.  font-size: 0;
8.  height: 0;
9.  clear: both;
10.  zoom: 1;
11. }
12. .main-content {
13.  float: left;
14.  width: 100%;
15. }
16. .main {
17.  height: 100px;
18.  background-color: green;
19.  margin-left: 110px;
20.  margin-right: 110px;
21. }
22. .left {
23.  float: left;
24.  width: 100px;
25.  height: 100px;
26.  background-color: orange;
27.  margin-left: -100%;
28. }
29. .rightright {
30.  float: left;
31.  width: 100px;
32.  height: 100px;
33.  background-color: orange;
34.  margin-left: -100px;
35. }
3.圣杯布局
圣杯布局在结构上要简单⼀点，也能够让主列优先加载。
实现原理：
（1）添加⼀个包裹框，设置padding-leftpadding-right值，⽐⼦列宽度⼤⼀个空隙的宽度。
（2）主列，⼦列都设置为float: left 左⼦列margin-left设置为-100%，并且设置为position:relative; left: -110px将左⼦列放置到左侧。右⼦列同理。
（3）主列只需设置宽度为100%即可。包裹框的宽度不要设置为100%，⾃适应即可。
html代码如下
XML/HTML Code复制内容到剪贴板
1. <div class="wrapper">
2.  <div class="main"></div>
3.  <div class="left"></div>
4.  <div class="right"></div>
5. </div>
css代码如下
CSS Code复制内容到剪贴板
1. .wrapper {
2.  padding-left: 110px;
3.  padding-right: 110px;
4.  overflow: hidden;
5. }
6. .main {
7.  float: left;
8.  width: 100%;
9.  height: 100px;
10.  background-color: #ccc;
11. }
12. .left {
13.  float: left;
14.  width: 100px;
15.  height: 100px;
16.  margin-left: -100%;
17.  position: relative;
18.  left: -110px;
19.  _left: 0;
20.  background-color: orange;
21. }
22. .rightright {
23.  float: left;
24.  width: 100px;
25.  height: 100px;
26.  background-color: orange;
27.  margin-left: -100px;
28.  position: relative;
29.  rightright: -110px;
30. }
下⾯再给出⼀个⾼度占满全屏的例⼦：
CSS Code复制内容到剪贴板
1. <p><!DOCTYPE html>
2. <html xmlns="<a target="_blank" href="www.w
3. <head runat="server">
4.    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5.    <title></title>
6.    <style type="text/css">
7.        body, html {
8.            margin: 0px;
9.        }
10.        #header {
11.            background: blue;
12.            height: 100px;
13.            width: 100%;
14.            position: relative; /*⽗div的位置设置成相对的*/
15.            top: 0;
16.        }
17.            #header #h_menu {
18.                position:absolute;
19.                bottombottom:0;
20.                background:yellow;
21.                width:100%;
22.                height:50px;
23.            }
24.        #middle {
25.            position:absolute;
26.            width:100%;
27.            height:auto;
28.            top: 100px;
29.            bottombottom:50px;
30.        }
31.        .left {
32.            width: 15%;    /*这⾥是百分⽐或者像素值，对应下⾯的center就是百分⽐或者像素值*/
33.            background: red;
34.            float: left;
35.            height:100%;
36.        }
37.        .rightright {
38.            width: 15%;  /*这⾥是百分⽐或者像素值，对应下⾯的center就是百分⽐或者像素值*/
css实现三列布局39.            height: 100%;
40.            background: pink;
41.            float: rightright;
42.        }
43.        .center {
44.            height: 100%;
45.            background: green;
46.            /*两种⽅式均可（⼀）margin(⼆)margin-left、margin-right*/
47.            /*（⼀）、⽤这种⽅式上⾯的left和right中的width是百分⽐或者像素值都可以*/
48.            margin: auto;
49.            /*(⼆)、这⾥是百分⽐或者像素值，对应上⾯的left、right中的width就是百分⽐或者像素值*/
50.            /*margin-left:15%;
51.            margin-right:15%;*/
52.        }
53.        #footer {
54.            background: blue;
55.            height: 50px;
56.            width: 100%;
57.            position: absolute;
58.            bottombottom: 0;
59.        }
60.    </style>
61. </head>
62. <body>
63.    <form id="form1" runat="server">
64.        <div>
65.            <div id="header">
66. 上
67.                <div id="h_menu">
68. 上_底
69.                </div>
70.            </div>
71.            <div id="middle">
72.                <div class="left">
73. 中左
74.                </div>
75.                <div class="right">
76. 中右
77.                </div>
78.                <div class="center">
79. 中间
80.                </div>
81.            </div>
82.            <div id="footer">
83. 下
84.            </div>
85.        </div>
86.    </form>
87. </body>
88. </html>
89. </p>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。