css3布局-圣杯布局

圣杯布局he双飞翼布局都是解决两边固定款中间自适应的三栏布局

圣杯布局为了中间div内容不被别的内容覆盖，将中间div设置了左右的内边距后，将左右两个div用相对布局position: relative并给两侧的div添加right和left属性，以便左右两栏div移动后不内容不覆盖中间div。

圣杯布局的特点(两端固定中间自适应)，也就是说两端的内容不会因为浏览器宽度的改变使其内容改变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        html,body{
            min-width: 500px;
        }
        #container{
            padding-left: 200px;
            padding-right: 150px;
            height: 200px;
        }
        #container .column{
            float: left;
        }
        #center{
            width: 100%;
            background: red;
        }
        #left{
            width: 200px;
            margin-left: -100%;
            position: relative;
            background: blue;
            left: -200px;
        }
        #right{
            width: 150px;
            margin-left: -150px;
            position: relative;
            right: -150px;
            background: orange;
        }
        #footer{
            clear: both;
        }
    </style>
    <body>
        <div id="header"></div>
        <div id="container">
            <div id="center" class="column">中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间</div>
            <div id="left" class="column">左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</div>
            <div id="right" class="column">右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</div>
        </div>
        <div id="footer"></div>
    </body>
</html>

通过这段代码的实现，可以发现随着浏览器的缩小，只有中间的文字内容会随之改变，两端则不会，这就是三栏布局中常见的圣杯布局。

圣杯布局：我个人的理解的是，两端的div可是看成是限制了杯子的大小，而中间的div可以看成是一定容量的水，当杯子缩小后，里面的水的容量是固定的，所以水位会随之增高或降低

css3布局-圣杯布局

猜你喜欢