三列布局03-圣杯

三列布局03-圣杯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三列布局03-圣杯</title>
    <!--
    1.两边固定 当中自适应
    2.当中列要完整显示
    3.当中列要优先加载
    -->
    <!--
    1. 浮动：搭建完整的布局框架
    2. margin 为负值：调整旁边两列的位置（使三列布局到一行上）
    3、使用相对定位：调整旁边两列的位置（使两列位置调整到两头）
    -->
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #content {
            padding: 0 200px;
        }
        #header,#footer{
            height: 20px;
            text-align: center;
            border: 1px solid deeppink;
            background: gray;
        }
        #content .middle{
            background: pink;
            width: 100%;
            float: left;
        }
        #content .left{
            position: relative;
            left: -200px;
            margin-left: -100%;
            float: left;
            background: yellow;
            width: 200px;
        }
        #content .right{
            position: relative;
            right: -200px;
            margin-left: -200px;
            float: left;
            background: yellow;
            width: 200px;
        }
        .clearfix{
            *zoom:1;
        }
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
    </style>

</head>
<body>
    <div id="header">header</div>
    <div id="content" class="clearfix">
        <div class="middle">
            middle
        </div>
        <div class= "left">
            left
        </div>
        <div class="right">
            right
        </div>
    </div>
   <div id="footer">footer</div>
</body>
</html>

 

posted @ 2021-02-10 18:39  xiluhua  阅读(66)  评论(0)  编辑  收藏  举报