css布局练习之圣杯布局

时间:2019-01-18
本文章向大家介绍css布局练习之圣杯布局,主要包括css布局练习之圣杯布局使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>圣杯布局</title>
        <style>
            .container {
                padding-left: 100px;
                padding-right: 100px;
            }
            .left{
                width: 100px;
                height: 200px;
                background: red;
                float: left;
                margin-left: -100%;
                position: relative;
                left: -100px;
            }
            .right{
                width: 100px;
                height: 200px;
                background: yellow;
                float: left;
                margin-left: -100px;
                position: relative;
                right: -100px;
            }
            .main{
                float: left;
                width: 100%;
                height: 200px;
                background: blue;

            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="main">中间</div>
            <div class="left">左侧</div>
            <div class="right">右侧</div>
        </div>
    </body>
</html>