css常见布局:圣杯布局

5年以前 | 阅读数：197 次 | 编程语言：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="center">Center</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;}
        .container{
            padding-left:150px;
            padding-right:200px;
        }
        .left{
            background: #34934D;
            width:150px;
            float:left;
            margin-left:-100%;
            position: relative;
            left:-150px;
        }
        .center{
            background: #D6D6D6;
            width:100%;
            float:left;

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