圣杯布局和双飞翼布局

最新推荐文章于 2024-10-16 11:23:07 发布

maomaolaoshi

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量370

点赞数

分类专栏： CSS 文章标签：面试题前端圣杯布局双飞翼布局 CSS布局

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

看了很多文章，发现有一篇文章的思路是最清晰的，所以专门转载一下：
http://www.jianshu.com/p/f9bcddb0e8b4

上述文章采用了圣杯布局：
即使用padding+position:relative的方式，配合right和left属性，防止中间div内容不被遮挡。
效果如下：
这里写图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        *{margin:0;
        padding:0;}
        header,footer{
            text-align: center;
            width: 100%;
            background-color: #10903d;
            height: 100px; 
        }
        .container{
            padding: 0 200px;
            overflow: hidden;
            min-height: 200px;
        }
        .middle,
        .left,
        .right{
            float: left;
            min-height: 200px;
        }
        .middle{
            width: 100%;
            background-color: #99CCCC;
        }
        .left,
        .right{
           width: 200px;
        }
        .left{
            margin-left: -100%;
            background-color: #FF9999;
            position: relative;
            left: -200px;
        }
        .right{
            margin-left:-200px; 
            background-color: #996699;
            position: relative;
            right: -200px;
        }
        </style>
</head>

<body>
<header>我是顶部</header>
<section class="container">
    <div class="middle">
            我是自适应的内容区
            我是自适应的内容区
            我是自适应的内容区
            我是自适应的内容区
            我是自适应的内容区
    </div>
    <div class="left">我是左边固定框</div>
    <div class="right">我是右边固定框</div>
</section>
<footer>我是尾部</footer>
</body>
</html>

双飞翼布局采用了在中间div内部创建子div用于放置内容，该子div中用margin-left和margin-right为左右两边栏div留出位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        *{margin:0;
        padding:0;}
        header,footer{
            text-align: center;
            width: 100%;
            background-color: #10903d;
            height: 100px; 
        }
        .container{
            /* padding: 0 200px; */
            overflow: hidden;
            min-height: 200px;
        }
        .middle,
        .left,
        .right{
            float: left;
            min-height: 200px;
        }
        .middle{
            width: 100%;
            background-color: #99CCCC;
        }
        .left,
        .right{
           width: 200px;
        }
        .left{
            margin-left: -100%;
            background-color: #FF9999;
            /* position: relative; */
            /* left: -200px; */

        }
        .right{
            margin-left:-200px; 
            background-color: #996699;
            /* position: relative;
            right: -200px; */
        }
        /* 新添加的子div */
        .middle-content{
            margin:0 200px;
        }
        </style>
</head>

<body>
<header>我是顶部</header>
<section class="container">
    <div class="middle">
        <div class="middle-content">  <!-- 这里添加子div -->
            我是自适应的内容区
            我是自适应的内容区
            我是自适应的内容区
            我是自适应的内容区
            我是自适应的内容区
        </div>
    </div>
    <div class="left">我是左边固定框</div>
    <div class="right">我是右边固定框</div>
</section>
<footer>我是尾部</footer>
</body>
</html>