css布局——双飞翼布局和圣杯布局

本文主要是介绍css布局——双飞翼布局和圣杯布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

双飞翼布局和圣杯布局将界面分为左中右三部分，其中左右侧固定宽度，中间实现自适应。

圣杯布局实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.container{height: 300px;padding:0 400px 0 200px;}.main{float: left;width: 100%;background-color: red;height: 300px;word-break: break-all;}.left{float: left;background-color: yellow;width: 200px;margin-left: -100%;height: 300px;position: relative;left:-200px;word-break: break-all;}.right{float: left;background-color: blue;width: 400px;margin-right: -400px;height: 300px;word-break: break-all;}
</style>
</head>
<body>
<div class="container"><div class="main">main</div><div class="left">left</div><div class="right">right</div>
</div>
</body>
</html>

解释：

1.main写在最前面（为了加载时先加载main部分，其实没啥用）,用负margin将left拉到main的左边，将right拉到它的右边，注意此时left和right是覆盖main部分的。(当margin为百分比时是相对父元素的宽度进行计算的，无论是margin-left、maring-right还是margin-top,margin-bottom)

2. main部分的宽度是100%，这说明它会占满一行，为了空出空间给left和right，需要对他们三外面的容器container进行设置：padding：0 400px 0 200px;

3. 接下来把空出来的部分分配给left和right，这里用到相对定位。.left{position:relative;left:-200px;}（left部分相对自身向左偏移200px）

双飞翼布局实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.container{height: 300px;}.main{float: left;width: 100%;background-color: red;height: 300px;word-break: break-all;}.left{float: left;background-color: yellow;width: 200px;margin-left: -100%;height: 300px;word-break: break-all;}.right{float: left;background-color: blue;width: 400px;margin-left: -400px;height: 300px;word-break: break-all;}.main_n{margin:0 400px 0 200px;}
</style>
</head>
<body>
<div class="test"><div class="main"><div class="main_n">main</div></div><div class="left">left</div><div class="right">right</div>
</div>
</body>
</html>

解释：

双飞翼布局跟圣杯布局实现的目标相同，实现手法区别主要在于后面的main定位。

当left和right占领main身体时，圣杯布局通过外部容器padding来实现left和right与main分离，而双飞翼布局则直接在main内定义一个div，通过该div的margin为left和right让出空间。

看图得区别：

圣杯布局：