双飞翼布局

最新推荐文章于 2022-09-26 01:25:24 发布

牛逼的账号

最新推荐文章于 2022-09-26 01:25:24 发布

阅读量78

点赞数

分类专栏：技术

技术专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>双飞翼或圣杯布局</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            
            #continate{
                font:18px/30px "微软雅黑"; /*第一个是字体大小 第二 是字体行高 第三 字体**/
                
            }
            
            /**全局定义三个div高度*/
            #conter,#left,#right{
                height: 300px;
                float: left;
            }
            
            #conter{
                background: sandybrown;
                width: 100%;
                
            }
            
            #left{
                background: lightblue;
                width: 30%;
                margin-left: -100%; /*往上100%就是回到最开始哪里*/
            }
            
            #right{
                background: cyan;
                width: 20%;
                margin-left: -20%;/*往上100%就是回到最开始哪里*/
            }
            
            header,footer{
                height: 100px;
                line-height: 100px;
                text-align: center;
                background: salmon;
                clear: both;/*清除浮动，要不然里面的div无法进入 因为里面没有指定height*/
            }
            
            #yingca{
                padding: 0 20% 0 30%;/*去掉左右的距离，把隐藏的内容显示出来**/
                
            }
            
            /*
             示例中增加一个#yingca的目的是因为当left上移时与center重叠了，
             left覆盖了center，通过yingca的padding将left占用的位置空出。
             * */
        </style>
    </head>
    <body>
        <header>one</header>
        <div id="continate">
            <div id="one">
                <div id="conter">
                    <div id="yingca">
                        conter
                    </div>
                    
                </div>
                
                <div id="left">--->//    width: 30%;   margin-left: -100%（这个是整个宽度问题）; /*往上100%就是回到最开始哪里*/
                    left
                </div>
                
                <div id="right"> // width: 20%; margin-left: -20%(这个是它自身宽度);/*往上100%就是回到最开始哪里*/
                    right
                </div>
            </div>
        </div>
        <footer>footer</footer>
    </body>
</html>