浅谈CSS两栏、三栏自适应布局
来源:互联网 发布:淘宝店代销靠谱吗 编辑:程序博客网 时间:2024/06/06 16:35
1、左侧固定宽度,右侧自适应
方法一:左侧设置float: left,右侧设置margin-left为左侧的宽度。
注意:右侧不能设置float: left。
<!doctype html> <html> <head> <style type="text/css"> #left{ width:500px; height:300px; float:left; background:#DDD; } #right{ height:300px; margin-left:500px; background:#AAA; } </style> </head> <body> <div id="left"></div> <div id="right"></div> </body> </html>
方法二:左侧设置float:left,右侧设置overflow:hidden。
利用的是创建一个新的BFC(块级格式化上下文)来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境,它内部元素的布局不受外面布局的影响。
<!doctype html> <html> <head> <style type="text/css"> #left{ width:500px; height:300px; float:left; background:#DDD; } #right{ height:300px; overflow:hidden;background:#AAA; } </style> </head> <body> <div id="left"></div> <div id="right"></div> </body> </html>
方法三:左侧设置绝对定位,右侧设置margin-left为左边的宽度。
<!doctype html> <html> <head> <style type="text/css"> body{margin:0;}#left{ width:500px; height:300px; position:absolute;left:0px;top:0px;background:#DDD; } #right{ height:300px; margin-left:500px;background:#AAA; } </style> </head> <body> <div id="left"></div> <div id="right"></div> </body> </html>
方法四:父元素设置display:flex,右侧设置flex:1。
<!doctype html> <html> <head> <style type="text/css"> body{display:flex;} #left{ width:500px; height:300px; background:#DDD; } #right{ height:300px; flex:1; background:#AAA; } </style> </head> <body> <div id="left"></div> <div id="right"></div> </body> </html>
2、右侧固定宽度,左侧自适应
方法一:左侧设置margin-right为右侧的宽度,右侧设置float: right。
<!doctype html><html><head><style type="text/css">#left{height:300px;margin-right:300px;background:#DDD;}#right{width:500px;height:300px;float:right;background:#AAA;}</style></head><body><div id="right"></div><div id="left"></div></body></html>
注意:right要放在left的前面,否则会出现right右浮动后内容换行下移的问题。出现该问题的原因是非float的元素和float的元素在一起时,如果非float的元素在先,那么float的元素将被排斥到下一行。由于right是float的元素,而left是非float的元素,为避免right内容换行下移,需要把right放在left的前面。
方法二:左侧设置margin-right为右侧的宽度,右侧采用绝对定位,根据所需的右侧div与浏览器窗口的顶端和右边的距离分别设置top和right。
<!doctype html><html><head><style type="text/css">body{margin:0;}#left{height:300px;margin-right:500px;background:#DDD;}#right{width:500px;height:300px;position:absolute;top:0;right:0;background:#AAA;}</style></head><body><div id="left"></div><div id="right"></div></body></html>
此时left和right的位置前后无关紧要。
注意:由于body默认有margin,对绝对定位的right设置top:0和right:0会导致左右侧之间有缝隙且不等高,为此,可统一设置body的margin为0。
方法三:左侧设置width为100%,float: left,margin-right为右侧的宽度的负值,右侧设置float: right。
<!doctype html> <html> <head> <style type="text/css"> #left{ height:300px; float:left;width:100%;margin-right:-500px; background:#DDD; } #right{ width:500px; height:300px; float:right; background:#AAA; } </style> </head> <body> <div id="left"></div> <div id="right"></div> </body> </html>
方法四:父元素设置display:flex,左侧设置flex:1。
<!doctype html> <html> <head> <style type="text/css"> body{ display:flex; } #left{ height:300px; flex:1; background:#DDD; } #right{ width:500px; height:300px; background:#AAA; } </style> </head> <body> <div id="left"></div> <div id="right"></div> </body> </html>
2、左右固定宽度,中间自适应
方法一:左侧设置float:left,右侧设置float:right,中间设置margin-right为右侧的宽度,margin-left为左侧的宽度。
<!doctype html><html><head><style type="text/css">#left{width:200px;height:300px;float:left;background:#AAA;}#middle{height:300px;margin-left:200px;margin-right:500px;background:#DDD;}#right{width:500px;height:300px;float:right;background:#AAA;}</style></head><body><div id="left"></div><div id="right"></div><div id="middle"></div></body></html>
注意:right要放在middle的前面,否则会出现right右浮动后内容换行下移的问题。出现该问题的原因是非float的元素和float的元素在一起时,如果非float的元素在先,那么float的元素将被排斥到下一行。由于right是float的元素,而middle是非float的元素,为避免right内容换行下移,需要把right放在middle的前面。
若中间栏需要优先加载,请见:http://blog.csdn.net/zhouziyu2011/article/details/53857095
方法二:
中间设置margin-right为右侧的宽度,margin-left为左侧的宽度,左侧和右侧采用绝对定位,根据左侧div所需的left与浏览器窗口的顶端和左边的距离分别设置top和left,根据所需的右侧div与浏览器窗口的顶端和右边的距离分别设置top和right。
<!doctype html><html><head><style type="text/css">body{margin:0;}#left{width:200px;height:300px;position:absolute;left:0;top:0;background:#AAA;}#middle{height:300px;margin-left:200px;margin-right:500px;background:#DDD;}#right{width:500px;height:300px;float:right;position:absolute;right:0;top:0;background:#AAA;}</style></head><body><div id="left"></div><div id="middle"></div><div id="right"></div></body></html>
此时middle和right的位置前后无关紧要。
注意:由于body默认有margin,对绝对定位的left设置top:0和left:0,right设置top:0和right:0会导致左右侧和中间之间有缝隙且不等高,为此,可统一设置body的margin为0。
方法三:父元素设置display:flex,中间设置flex:1。
<!doctype html> <html> <head> <style type="text/css"> body{ margin:0; display:flex; } #left{ width:200px; height:300px; background:#AAA; } #middle{ height:300px; flex:1; background:#DDD; } #right{ width:500px; height:300px; background:#AAA; } </style> </head> <body> <div id="left"></div> <div id="middle"></div> <div id="right"></div> </body> </html>
- 浅谈CSS两栏、三栏自适应布局
- css实现等高布局 两栏自适应布局 三栏自适应布局
- CSS的自适应两栏/三栏布局
- CSS三栏自适应布局
- 浅谈css两栏布局
- css实现两栏自适应布局
- css三栏布局,中间自适应
- 使用css实现三栏自适应布局
- CSS:两栏布局,三栏布局
- css布局之浮动模型&&左右两栏自适应布局
- 两栏自适应布局
- 两栏自适应布局
- css布局:table布局、两栏布局、三栏布局
- html+css:一个自适应的两栏布局的实现
- CSS布局:中栏固定宽度,左右两栏宽度自适应
- css实现两栏(一边固宽,一边自适应)布局
- 三栏布局----自适应
- 三栏自适应布局
- ORACLE学习命令
- Simulator installs an app drag-and-drop onto the Simulator window
- MP4剪切合成时间计算
- nginx 服务器重启命令
- 分糖果
- 浅谈CSS两栏、三栏自适应布局
- TimerTask is scheduled already 解决方法
- Hadoop&&Streaming框架学习
- 分布式事务一致性解决方案
- Linux 使用rpm方式安装最新mysql(5.7.16)步骤以及常见问题解决
- RCNN学习笔记(2):Fast R-CNN
- Android NFC标签 开发深度解析 触碰的艺术
- Android Studio 报错
- 在编写网站的时候,给一个div设置背景图片,怎么让这个图片随着div大小的改变,而等比例的缩放。