div+css实现几种经典布局_divcss布局经典实例

1、右边固定，左边自适应

注意：右边的块写上面

<div class="right"></div>
<div class="left"></div>
 
.right{
	width: 100px;
	height: 100px;
	position: absolute;
	background-color: red;
	right: 0px;
}
.left{
	height: 100px;
	margin-right: 100px;
	background-color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果图

2、左右固定，中间自适应

注意：先写右边、左边、最后才是中间的div

<div style="width:100%; margin:0 auto;"> 
 
       <div style="width:200px; float:right; background-color:#960;height:200px">1</div>
 
       <div style="width:150px; float:left; background:#6FF;height:200px">2</div>
 
       <div style="margin-left:150px;margin-right:200px; background-color:#9F3;height:200px">3</div>
 
    </div>

1
2
3
4
5
6
7
8
9
10

效果图

3、左边固定，右边自适应

<div id="sidebar" style="height:300px;">固定宽度区</div>
<div id="content" style="height:300px;">自适应区</div>
 
 #sidebar {
      float: left; 
      width: 300px;
      background-color:pink;
      top:50px;
      left:0;
  }
  #content {
      margin-left: 300px;
      height:1000px;
      background-color:#e456aa;
      margin-top:50px;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

效果图

4、上下固定，中间自适应
上中下三行，头部200px高，底部200px高，中间自适应占满

<div class="divBox">
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
</div>
 
*{
	margin:0px;
	padding: 0px;
}
.divBox{
	background: yellow;
	width: 100%;
}
.top{
	background: red;
	width: 100%;
	height: 200px;
	position: absolute;
	top: 0;
}
.center{
	width: 100%;
	background: grey;
	position: absolute;
	top: 200px;
	bottom: 200px;
}
.bottom{
	width: 100%;
	background: green;        
	height: 200px;
	position: absolute;
	bottom: 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
32
33
34
35

效果图

5、上下两部分，底下这个固定高度200px，如果上面的内容少，那么这个footer就固定在底部，如果内容多，就把footer挤着往下走

<div class="divBox">
	<div class="content"></div>
	<div class="footer"></div>
</div>
 
*{
	margin: 0px;
	padding: 0px;
}
html{
	height: 100%;
}
body{
	min-height: 100%;
	position: relative;
}
.content{
	width: 100%;
	background:red;
	padding-bottom: 200px;
}
.footer{
	width: 100%;
	height: 200px;
	background: green;
	position: absolute;
	bottom: 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