圣杯布局的进化:双飞翼布局

5年以前  |  阅读数:230 次  |  编程语言:HTML/CSS 

双飞翼布局是在圣杯布局上进行改进,当left和right设置负margin,会上升并挡住center,圣杯布局是采用padding+relative定位,而双飞翼布局是采用margin解决。

具体代码如下

<!DOCTYPE html>
<html>
<head>
    <title>双飞翼布局</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="header">Header</div>
    <div class="container">
        <div class="center">
            <div class="center-inner">Center</div>
        </div>
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>

index.css代码:

body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .left{
            background: #34934D;
            width:150px;
            float:left;
            margin-left:-100%;

        }
        .center{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .center-inner{
            margin-left: 150px;
            margin-right: 200px;
        }
        .right{
            background: #EF4400;
            width:200px;
            float:left;
            margin-left:-200px;
        }

需要注意的是

  • 这里是在center里面套了一个div,再设置margin值。
  • left和right没有使用定位。
 相关文章:
PHP分页显示制作详细讲解
SSH 登录失败:Host key verification failed
获取IMSI
将二进制数据转为16进制以便显示
获取IMEI
贪吃蛇
文件下载
双位运算符
发送邮件
PHP自定义函数获取搜索引擎来源关键字的方法
Java生成UUID
提取后缀名
年的日历图
在Zeus Web Server中安装PHP语言支持
让你成为最历害的git提交人
Yii2汉字转拼音类的实例代码
再谈PHP中单双引号的区别详解
指定应用ID以获取对应的应用名称
Python 2与Python 3版本和编码的对比
php封装的page分页类完整实例