面试题中,经典的布局题,
如何实现两边固定中间自适应 实现方式有很多种,本文主要介绍圣杯布局和双飞翼布局这两种方法,实现上述布局的方法与区别 01 圣杯布局 优点:不需要添加dom节点 缺点:正常情况下是没有问题的,但是特殊情况下就会暴露此方案的弊端,如果将浏览器无限放大时,「圣杯」将会「破碎」掉。 分析: html代码,middle放在最前面,如下: <div id="middle">middle</div> <div id="left">left</div> <div id="right">right</div> middle 中间的 div 重点样式: float: left; width: 100%; left 左边的 div 重点样式: float:left; margin-left:-100%; position: relative; left: -180px;注:left的值,与left 的宽度的值一致,只是它为负值 right 右边的 div 重点样式: float: left; margin-left: -200px; background: #0c9; position: relative; right: -200px;注:margin-left 与 right 的值,与右边 div 宽度的值一致,只是它为负值 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>圣杯布局</title> <style> #bd{ padding: 0 200px 0 180px; height: 100px; } #middle{ float: left; width: 100%; height: 500px; background:blue; } #left{ float:left; width:180px; height:500px; margin-left:-100%; background: #0c9; position: relative; left: -180px; } #right{ float: left; width: 200px; height: 500px; margin-left: -200px; background: #0c9; position: relative; right: -200px; } </style> </head> <body> <div id="bd"> <div id="middle">middle</div> <div id="left">left</div> <div id="right">right</div> </div> </body> </html> 02 双飞翼布局 优点:不会像圣杯布局那样变形 缺点:多加了一层dom节点 分析: html代码,如下: <div id="center"> <div id="inside">middle</div> </div> <div id="left">left</div> <div id="right">right</div> 创建一个子div 放置内容,且没有使用position,而是给子div添加margin-left, margin-right 的值,给左边两边留位置: /*给内部div添加margin,把内容放到中间栏,其实整个背景还是100%*/ #inside{ margin:0 200px 0 180px; height:100px; } 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>双飞翼布局</title> <style> #center{ float:left; width:100%;/*左栏上去到第一行*/ height:100px; background:blue; } #left{ float:left; width:180px; height:100px; margin-left:-100%; background:#0c9; } #right{ float:left; width:200px; height:100px; margin-left:-200px; background:#0c9; } /*给内部div添加margin,把内容放到中间栏,其实整个背景还是100%*/ #inside{ margin:0 200px 0 180px; height:100px; } </style> </head> <body> <div id="center"> <div id="inside">middle</div> </div> <div id="left">left</div> <div id="right">right</div> </body> 03 总结 相同作用: 圣杯布局和双飞翼布局解决的问题是相同的,就是两边定宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。 双飞翼与圣杯的主要差异 双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。 圣杯采用的是padding,而双飞翼采用的margin,解决了圣杯布局的问题。 双飞翼布局不用设置相对布局,以及对应的left和right值。 如果喜欢这篇文章,欢迎添加右下角 "公众号",可以第一时间获到文章推送 |
|
|