【前端】自适应布局方法总结
2018-06-24 01:58:50来源:未知 阅读 ()
一栏固定一栏自适应
实现代码:
<!DOCTYPE html> <html> <head> <title>自适应布局-一栏固定一栏自适应</title> <meta charset="utf-8"> <style type="text/css"> *{ padding: 0; margin: 0; } #left{ height: 600px; width: 200px; float: left; background-color: #fffc00; } #main{ height: 600px; width: auto; background-color: #03c03c; } </style> </head> <body> <div id="left">left 固定宽度</div> <div id="main">main 自适应宽度</div> </body> </html>
左右两栏固定,中间自适应
- 方法一 :使用float浮动
自身浮动法的原理就是使用对左右使用分别使用float:left和float:right,float使左右两个元素脱离文档流,中间元素正常在正常文档流中,使用margin指定左右外边距对其进行一个定位。
<!DOCTYPE html> <html> <head> <title>自适应布局</title> <meta charset="utf-8"> <style type="text/css"> *{ padding: 0; margin: 0; } #container{ width: 100%; margin: 0 auto; } #left{ width: 200px; height: 600px; float: left; background-color: #fffc00; } #right{ width: 100px; height: 600px; float: right; background-color: orange; } #main{ height: 600px; margin-left: 0 100px 0 200px; background-color: #03c03c; } </style> </head> <body> <div id="container"> <div id="left">left 200px</div> <div id="right">right 100px</div> <div id="main">main 自适应</div> </div> </body> </html>
- 方法二:使用绝对定位
绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度。
<!DOCTYPE html> <html> <head> <title>自适应布局</title> <meta charset="utf-8"> <style type="text/css"> *{ padding: 0; margin: 0; } #left{ width: 200px; height: 600px; position: absolute; top: 0; left: 0; background-color: #fffc00; } #right{ width: 100px; height: 600px; position: absolute; top: 0; right: 0; background-color: orange; } #main{ height: 600px; position: absolute; left: 200px; right: 100px; top: 0; background-color: #03c03c; } </style> </head> <body> <div id="left">left 200px</div> <div id="right">right 100px</div> <div id="main">main 自适应</div> </body> </html>
- 方法三:使用负margin(圣杯布局)
圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div,包含div需要设置float属性使其形成一个BFC,并设置宽度,并且这个宽度要和left块的margin负值进行配合,具体原理参考这里。这里对圣杯布局解释特别详细。
<!DOCTYPE html> <html> <head> <title>自适应布局</title> <meta charset="utf-8"> <style type="text/css"> *{ padding: 0; margin: 0; } #wrap{ width: 100%; float: left; } #main{ height: 600px; margin: 0 100px 0 200px; background-color: #03c03c; } #left{ width: 200px; height: 600px; float: left; margin-left: -100%; background-color: #fffc00; } #right{ width: 100px; height: 600px; float: left; margin-left: -100px; background-color: orange; } </style> </head> <body> <div id="wrap"> <div id="main">main 自适应</div> </div> <div id="left">left 200px</div> <div id="right">right 100px</div> </body> </html>
- 方法四:使用flex(css3新特性)
<!DOCTYPE html> <html> <head> <title>自适应布局</title> <meta charset="utf-8"> <style type="text/css"> *{ padding: 0; margin: 0; } #container{ width: 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } #left{ width: 200px; height: 600px; background-color: #fffc00; } #main{ width: auto; height: 600px; background-color: #03c03c; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; -o-flex: 1; flex: 1; } #right{ width: 100px; height: 600px; background-color: orange; } </style> </head> <body> <div id="container"> <div id="left">left 200px</div> <div id="main">main 自适应</div> <div id="right">right 100px</div> </div> </body> </html>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:居中的几种方法
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash