CSS+DIV自适应布局
1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满)
代码如下:
左右两侧,左侧固定宽度200px;右侧自适应占满
.box{
width:800px;
height:300px;
margin:0 auto;
}
.left{
width:200px;
height:300px;
background:#f00;
float:left;
}
.right{
height:300px;
margin-left:200px;
background:#0f0;
}
运行结果如下图:
两栏布局(左定宽,右自动)
float + margin
2.三列布局(左中右三列,左右200px固定,中间自适应占满)
方法一(左右浮动,中间 margin-left,margin-right,中间div在最后)
代码如下
左中右三列,左右200px固定,中间自适应占满 方法一
.box{
width:800px;
height:300px;
margin:0 auto;
}
.left{
width:200px;
height:300px;
background:#f00;
float:left;
}
.right{
width:200px;
height:300px;
float:right;
background:#0f0;
}
.center{
height:300px;
background-color:#00f;
margin:0 200px;
}
运行结果如下图
方法二(左中右定位):
代码如下
左中右三列,左右200px固定,中间自适应占满 方法二
.box{
width:1000px;
height:300px;
margin:0 auto;
position:relative;
}
.left{
width:200px;
height:300px;
background:#f00;
position:absolute;
top:0px;
left:0px;
}
.right{
width:200px;
height:300px;
background:#0f0;
position:absolute;
top:0px;
right:0px;
}
.center{
height:300px;
background-color:#00f;
position:absolute;
left:200px;
right:200px;
}
运行结果如下图:
3.上中下三行,头部,底部固定高200px,中间自适应占满
中间定位,底部定位
代码如下:
上中下三行,头部,底部固定高200px,中间自适应占满
*{
margin:0;
}
html{
height:100%;
}
body{
min-height:100%;
}
.header{
width:100%;
height:100px;
background-color:#ccc;
}
.main{
width:100%;
background-color:#f00;
position:absolute;
top:100px;
bottom:100px;
}
.footer{
height:100px;
width:100%;
position:absolute;
bottom:0px;
background-color:#ccc;
}
运行代码如下图:
4.上下两部分,地下这个股东高度200px,如果上面的内容少,那么这个footer就固定在底部,如果内容多,就把footer往下挤
代码如下:
上下两部分,地下这个股东高度200px,如果上面的内容少,
那么这个footer就固定在底部,如果内容多,就把footer往下挤
*{
margin:0;
}
html{
height:100%;
}
body{
min-height:100%;
background-color:#00f;
position:relative;
}
.header{
height:100%;
background-color:#00f;
padding-bottom:200px;
}
.footer{
width:100%;
height:200px;
position:absolute;
bottom:0px;
background-color:#0ff;
}
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
运行结果如下图:
新手入门,请多多关照
如果觉得《html中div自适应代码 CSS+DIV自适应布局》对你有帮助,请点赞、收藏,并留下你的观点哦!