页面布局（圣杯，双飞翼)

最新推荐文章于 2022-11-28 10:28:14 发布

lzr_must

最新推荐文章于 2022-11-28 10:28:14 发布

阅读量217

点赞数

分类专栏： css 文章标签：布局

本文链接：https://blog.csdn.net/lzr_must/article/details/78539332

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

常见布局：grid，flex，绝对定位，圣杯及双飞翼布局。

圣杯布局

<!-- 圣杯布局 -->
<!DOCTYPE html>
<html>
<head>
    <style>
        .con {
            padding: 0px 190px 0px 150px;
            overflow: auto;
        }

        .left {
            background: #E79F6D;
            width: 150px;
            float: left;
            position: relative;
            left: -150px;
            margin-left: -100%;
            /*left: -100%;*/
            /*margin-left: -150px;*/
        }

        .main {
            background: #D6D6D6;
            width: 100%;
            float: left;
        }

        .right {
            background: #77BBDD;
            width: 190px;
            float: left;
            position: relative;
            margin-left: -190px;
            right: -190px;
            /*left: 190px;*/
        }
    </style>
</head>
<body>
<div class="con">
    <div class="main">
        <div style="background-color: #1fe6e8;width:200px">
            nihaollelelel
        </div>
    </div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
</body>
</html>

双飞翼布局

<!-- 双飞翼布局 -->  
<!DOCTYPE html>  
<html>  
<head>  
<style>        
        .left{  
            background: #E79F6D;  
            width:150px;  
            float:left;  
            margin-left: -100%;  
        }  
        .main{  
            background: #D6D6D6;  
            width:100%;  
            float:left;   
        }  
        .mc {  
            margin-left: 150px;
            margin-right: 190px;  
        }  
        .right{  
            background: #77BBDD;  
            width:190px;  
            float:left;  
            margin-left: -190px;
        }  

</style>  

</head>  
    <body>  
    <div class="con">  
            <div class="main">  
                <div class="mc">Main</div>  
            </div>  
            <div class="left">Left</div>  
            <div class="right">Right</div>  
    </div>  
    </body>  
</html>