CSS布局之圣杯布局和双飞翼布局

来源：互联网发布：js监听div高度变化编辑：程序博客网时间：2024/04/30 19:03

CSS实现页面布局有很多方法和样式，只有了解CSS布局实现的方法，才能更合理的安排页面内容，实现页面的整体效果。

圣杯布局和双飞翼布局是什么样的？

就是一种特殊的一行三列布局，特点是左右DIV是确定宽度的，中间是自适应的。

实现圣杯布局和双飞翼布局

这两种布局很类似，他们的区别就是实现中间DIV自适应效果时方法不同。

html结构部分：

<body><div class="container"><div class="mid fl">中间的盒子中间的盒子中间的盒子中间的盒子中间的盒子wordwordword</div><div class="left fl">左盒子</div><div class="right fl">右盒子</div></div></body>

和一行三列布局的结构是相同的，不过我们要把中间的盒子写在前面，至于为什么？看完后面就知道了。

css样式部分：

页面效果：

<style type="text/css">.mid{width:100%;height:200px;background-color:#777;}.left{width:100px;height:200px;background-color:pink;}.right{width:200px;height:200px;background-color:green;}.fl{float:left;}</style>

现在这块怎么办？首先现在三个盒子都是左浮动的，一个挨一个，我们可以通过左右盒子的margin-top来使其挪动到中间盒子的上面，看看效果：

<style type="text/css">.mid{width:100%;height:200px;background-color:#777;}.left{width:100px;height:200px;background-color:pink;margin-left:-100%;}.right{width:200px;height:200px;background-color:green;margin-left:-200px;}.fl{float:left;}</style>

看起来似乎和一行三列一样，但是注意中间的盒子是被左右盒子覆盖了一部分的，怎么使左右和中间分开呢？使用什么方法？这就是圣杯布局和双飞翼布局的差别所在了。

圣杯布局的实现方法

我们从问题出发来看，要把左右盒子赶走中间盒子的底盘，那就要给人家一个地方，对吧。

那么，怎么开辟一块地方呢？看起来，中间盒子的宽度是100%，似乎没有地方了！

咦，我们看看他们是不是在一个大盒子里面包着，那么……我们来从这块想办法吧。

设置大盒子的margin或padding值，让它给左边右边都让出一个左右盒子的宽度，然后把左右盒子赶过去，用相对定位来设置就可以了，效果：

<style type="text/css">.container{margin:0 200px 0 100px;}.mid{width:100%;height:200px;background-color:#777;}.left{width:100px;height:200px;background-color:pink;margin-left:-100%;position:relative;left:-100px;}.right{width:200px;height:200px;background-color:green;margin-left:-200px;position:relative;right:-200px;}.fl{float:left;}</style>

双飞翼布局的实现方法

双飞翼布局采用另一种方法实现同样的效果，它是这么思考的，既然左右盒子来到中间盒子的地盘上了，那么中间的盒子比较爱好和平，它从自己的地盘上让出位置给左右盒子。就是在自己内部新建一个盒子，设置新盒子的margin或padding，给左右盒子让出位置，效果：

<style type="text/css">.mid{width:100%;height:200px;background-color:#777;}.inner{padding:0 200px 0 100px;}.left{width:100px;height:200px;background-color:pink;margin-left:-100%;}.right{width:200px;height:200px;background-color:green;margin-left:-200px;}.fl{float:left;}</style>

虽然说实现的效果一致，但是DIV的布局是不同的，可以F12查看他们的DIV布局样式。

效果优化

当缩小放大浏览器界面时，左右盒子宽度不变，中间是自适应的，但当界面太窄时，就会出现显示问题，为大盒子设置最小宽度500px，当界面小于500px时，中间盒子就保持不变。

当缩小界面，中间盒子的文字内容可能会跳行，设置分行显示，会自动将文字换行。

双飞翼布局效果优化代码（圣杯布局也可以按此优化）：

<style type="text/css">.container{min-width:500px;}.mid{width:100%;height:200px;background-color:#777;}.inner{padding:0 200px 0 100px;word-break:break-all;}.left{width:100px;height:200px;background-color:pink;margin-left:-100%;}.right{width:200px;height:200px;background-color:green;margin-left:-200px;}.fl{float:left;}</style>

总结

通过上面两种布局方法，可以体会到布局是盒子模型、定位等的综合运用，同一种布局会有很多种解决办法，有的简单有的复杂。深入理解CSS布局是以CSS基本语法为基础的，根基牢固，方可……OK，就这样。

0 0