CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

时间:2019-12-21 宋阿慧の小跟班吖人气:1

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局

虽然两者的实现方法略有差异，不过都遵循了以下要点：

1.两侧宽度固定，中间宽度自适应
2.中间部分在DOM结构上优先，以便先行渲染
3.允许三列中的任意一列成为最高列
4.只需要使用一个额外的<div>标签

圣杯布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>圣杯布局</title>
        <style type="text/css">
            .header{
                height:50px;
                background: #666;
                text-align: center;
            }
            .main{
                /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
                padding:0 200px 0 180px;
                height:100px;
            }
            .middle{
                float:left;
                width:100%;/*左栏上去到第一行*/
                height:100px;
                background:blue;
            }
            .left{
                float:left;
                width:180px;
                height:100px;
                margin-left:-100%;
                background:#0c9;
                /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
                position:relative;
                left:-180px;
            }
            .right{
                float:left;
                width:200px;
                height:100px;
                margin-left:-200px;
                background:#0c9;
                /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
                position:relative;
                right:-200px;
            }
            .footer{
                height:50px;
                background: #666;
                text-align: center;
                
            }
        </style>
    </head>
    <body>
    <div class="header">header</div>
    <div class="main">
      <div class="middle">middle</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
    </body>
</html>

双飞翼布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>双飞翼布局</title>
        <style type="text/css">
            .header {
                height: 100px;
                background: bisque;
            }

            .left {
                width: 200px;
                height: 300px;
                background: coral;
                float: left;
                margin-left: -100%;
                margin-right: -200px;
            }

            .center {
                background: palegreen;
                float: left;
                width: 100%;
                
            }
            .inside{
                margin-left: 200px;
                margin-right: 180px;
            }

            .right {
                width: 180px;
                height: 200px;
                background: darkorange;
                float: left;
                margin-left: -180px;
                
            }

            .footer {
                height: 200px;
                background: salmon;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="header">header</div>
        <div class="main">
            <div class="center">
                <div class="inside">
                    中间自适应区域
                </div>
            </div>
            <div class="left">左边固定区域</div>
            <div class="right">右边固定区域</div>
        </div>
        <div class="footer">footer</div>
    </body>
</html>

加载全部内容