|
面试题中，经典的布局题，
如何实现两边固定中间自适应 实现方式有很多种，本文主要介绍圣杯布局和双飞翼布局这两种方法，实现上述布局的方法与区别 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值。 如果喜欢这篇文章，欢迎添加右下角 "公众号"，可以第一时间获到文章推送 |
|
|
公众号
