实现圣杯模式

圣杯模式是两边宽度固定，中间内容自适应。主要应用position，padding技术实现

注意：(1)中间自适应的盒子要放在两侧宽度固定的盒子前面进行渲染。

(2)要加上box-sizing:border-box,要设置以border进行计算，否则对于中间盒子设置了width：100%和padding后，就会造成出现滚动条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .left,
        .middle,
        .right{
            min-height: 170px;
        }
        .left,
        .right{
            width: 200px;
        }
        .left{
            background: orangered;
            position: absolute;
            top: 0;
            left: 0;
        }
        .middle{
            width: 100%;
            background: blue;
            position: relative;
            padding: 0 220px;
        }
        .right{
            background: yellowgreen;
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="middle">
        　　三月，醉一场青春的流年。
           慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。
           青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；
           青春，是一场风花雪月的光阴。
    </div>
    <div class="left">
        左侧的内容，我宽度固定
    </div>
    <div class="right">
        右侧的内容，我宽度固定
    </div>
</div>
</body>
</html>

posted on 2018-12-21 21:35 小包子kairos 阅读(579) 评论(0) 编辑收藏举报