圣杯布局的退化 - 代码块 - 哈喽比特

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

前面两个布局是考虑到中间一栏先加载，但有些场景并不需要，此时可以很快的得到简单的三栏布局。

代码示例如下：

<!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="left">Left</div>
        <div class="center">Center</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;}
        .container{
            padding-left: 150px;
            padding-right: 200px;
        }
        .left{
            background: #34934D;
            width:150px;
            float:left;
            margin-left:-150px;

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

        }
        .right{
            background: #EF4400;
            width:200px;
            float:right;
            margin-right: -200px;
        }

需要注意的是:

在HTML中left放在center的前面。
主要实现的思路：根据文档流从上到下为：left-center-right。首先将container设置左右padding，在将left和right设置负margin值，使其刚好落在container的padding中。
无论是三栏布局还是两栏布局，以上方法都适用。