CSS特殊布局

发表于 | 分类于

三列布局

三列布局的特征是两侧两列固定宽度，中间列自适应宽度。

1.margin + float

原理说明：设置两个侧栏分别向左向右浮动，中间列的宽度根据浏览器窗口自适应。对中间面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。

DOM文档

1
2
3
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>

CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#left{
	width: 200px;
	height: 100px;
	float: left;
	background-color: red;
}
#right{
	width: 100px;
	height: 100px;
	float: right;
	background-color: yellow;
}
#center{
	margin-left: 210px;
	margin-right:110px;
	height: 100px;
	background-color: blue;
}

==注意==：DOM文档的书写顺序，先写两侧栏，再写中间主面板，更换后则侧栏会被挤到下一列

2.position + margin

原理说明：通过绝对定位将两个侧栏固定，中间列自适应。对中间面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度

CSS样式

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
body{
	margin:0;
	padding: 0;
}
#left{
	width: 200px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: red;
}
#right{
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	right: 0;
	background-color: yellow;
}
#center{
	height: 100px;
	margin:0 110px 0 210px;
	background-color: blue;
}

两列布局

原理和上面三列布局一样，去掉一个侧栏

1.margin + float

DOM文档 

1
2
3

<div id="left"></div>
<div id="main"></div>

CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
#left{
	width: 200px;
	height: 100px;
	float: left;
	background-color: red;
}
		
#main{
	height: 100px;
	margin-left: 210px;
	background-color: blue;
}

2.position + margin

CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body{
	margin:0;
	padding:0;
}
#left{
	width: 200px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0; 
	background-color: red;
}
		
#main{
	height: 100px;
	margin-left: 210px;
	background-color: blue;
}

圣杯布局

左右两栏固定宽度，中间部分自适应

步骤：

  1. 三者都设置向左浮动
  2. 设置中间主面板宽度为100%，设置两侧栏的宽度。
  3. 设置 负边距，左侧的设置负左边距为100%，右侧的设置负左边距为负的自身宽度。
  4. 设置父级的padding值给左右两栏留出空间。
  5. 设置两个左右两侧为相对定位，左侧的left值为负的左侧的宽度，右侧的right值为负的右侧宽度。

DOM文档

1
2
3
4
5
<div id="content">
	<div class="main"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>

CSS样式

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
.main{
    width:100%;
    height:100px;
    float:left;
}

.left{
    width:200px;
    height:100px;
    float:left;
    margin-left:-100%;
    position:relative;
    left:-200px;
}

.right{
    width:100px;
    height:100px;
    float:left;
    margin-left:-100px;
    position:relative;
    right:-100px;
}

#content{
    padding:0 100px 0 200px;
}

==注意==：DOM元素的书写顺序不得更改

双飞翼布局

原理说明：双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言，main的margin值变化便不会影响两个侧栏，因此省掉了对两侧栏设置相对布局的步骤。

步骤：

  1. 三者都设置向左浮动。
  2. 设置main-wrap宽度为100%，设置两个侧栏的宽度。
  3. 设置 负边距，left设置负左边距为100%，right设置负左边距为负的自身宽度。
  4. 设置main的margin值给左右两个子面板留出空间。

DOM文档

1
2
3
4
5
<div id="main-wrap">
	<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

CSS样式

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
#main-wrap{
	width: 100%;
	height: 100px;
	float: left;
	background-color: blue;
}

.left{
	width: 200px;
	height: 100px;
	float: left;
	margin-left: -100%;
	background-color: red;
}

.right{
	width: 100px;
	height: 100px;
	float: left;
	margin-left: -100px;
	background-color: yellow;
}

.main{
	margin:0 100px 0 200px;
}

待续