Skip to content

Latest commit

 

History

History
145 lines (131 loc) · 2.52 KB

圣杯布局和双飞翼布局.md

File metadata and controls

145 lines (131 loc) · 2.52 KB

圣杯布局/左右固定，中间自适应

1.使用浮动

Codes/CSS/布局方案/01.圣杯布局.html

    <style>
        html,body{
            height: 100%;
            overflow: hidden;
        }
        .container{
            height: 100%;
            padding: 0 200px;
        }
        .left, .right{
            width: 200px;
            min-height: 200px;
            background-color: cadetblue;
        }
        .center{
            width: 100%;
            min-height: 300px;
            background-color: aqua;
        }
        .left,.right,.center{
            float: left;
        }
        .left{
            margin-left: -100%;
            position: relative;
            left:-200px;
        }
        .right{
            margin-right: -200px;
        }

    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

2.使用flex

Codes/CSS/布局方案/03.flex圣杯布局.html

.container{
   width: 100%;
   display: flex;
   justify-content: space-between;

}
.center{
   flex: 1;
   min-height: 300px;
   background-color: bisque;
}
.left,
.right{
   flex:0 0 200px;
   height: 200px;
   background-color: aquamarine;
}

3.使用定位

Codes/CSS/布局方案/04.定位圣杯布局.html

.container{
   height: 100%;
   position: relative;
}
.center{
   margin: 0 200px;
   min-height: 300px;
   background-color: antiquewhite;
}
.left,
.right{
   position: absolute;
   top:0;
   width: 200px;
   height: 200px;
   background-color: aquamarine;
}
.left{
   left: 0;
}
.right{
   right: 0;
}

双飞翼布局

Codes/CSS/布局方案/02.双飞翼布局

    <style>
        html,body{
            height: 100%;
            overflow: hidden;
        }
        .container{
            width: 100%;
        }
        .container .center{
            margin: 0 200px;
            min-height: 300px;
            background-color: aqua;
        }
        .left,.right{
            width: 200px;
            min-height: 100px;
            background-color: blanchedalmond;
        }
        .container,.right,.left{
            float: left;
        }
        .left{
            margin-left: -100%;
        }
        .right{
            margin-left: -200px;
        }
        

    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="center"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>