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

来源：互联网发布：js定时器setinterval 编辑：程序博客网时间：2024/05/20 07:53

双飞翼布局和圣杯布局都将界面分为左中右三部分，中间部分是主体部分。

圣杯布局实现代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.test{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-left: -400px;height: 300px;position: relative;left: 400px;  word-break: break-all;}</style></head><body><div class="test"><div class="main">main</div><div class="left">left</div><div class="right">right</div></div></body></html>

解释：

1.main写在最前面（for 加载时先加载main部分）,用margin将left拉到main的左边，将right拉到它的右边，注意此时left和right是覆盖main部分的

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

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

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

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.test{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的padding为left和right让出空间。

看图得区别：

圣杯布局：

双飞翼布局：

阅读全文

0 0