三种三栏网页布局自适应

最新推荐文章于 2023-11-03 20:20:04 发布

Lee_Blog

最新推荐文章于 2023-11-03 20:20:04 发布

阅读量198

点赞数

分类专栏： WEB 文章标签： css html

本文链接：https://blog.csdn.net/qq_43216593/article/details/107319884

版权

WEB 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

三种三栏网页布局自适应

三种方法：
1.绝对定位法
2.margin负值法
3.自身浮动法（左栏左浮动，右栏右浮动，主体直接放后面）

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>三种三栏网页自适应</title>
        <style>
         
        /* 
        //第一种 自身浮动float
        html,body{
            margin:0; 
            height:100%;
            }
        .middle{
            height:100%; 
            margin:0 200px; 
            background:#ffe6b8;
            }
        .left, .right{
            width:200px; 
            height:100%; 
            
            background:#a0b3d6;
            }
        .left{
            float:left;
            
            }
        .right{
            float:right;
            } */

            /*绝对定位*/
            /* html,body{margin:0; height:100%;}
            .left,.right{position:absolute; top:0; width:200px; height:100%;}
            .left{left:0; background:#a0b3d6;}
            .right{right:0; background:#a0b3d6;}
            .middle{margin:0 210px; background:#ffe6b8; height:100%;} */
            
            /*margin负值法*/
            html,body{margin:0; height:100%;}
            .middle{width:100%; height:100%; float:left;}
            .middle .body{margin:0 210px; background:#ffe6b8; height:100%;}
            .left,.right{width:200px; height:100%; float:left; background:#a0b3d6;}
            .left{margin-left:-100%;}
            .right{margin-left:-200px;}/*左移其自身宽度*/

        </style>
    </head>
    <body>
        <!--margin负值法-->
        <div class="middle">   
            <div class="body"></div>
        </div>
        <div class="left">               
        </div>
       
        <div class="right">
        </div>
            <!-- 第二种：绝对定位
            <div class="left">               
            </div>
            <div class="middle">   
            </div>
            <div class="right">
            </div> -->

            <!-- 第一种：自身浮动
             // 三个div标签的顺序的关键是要把主体div放在最后，左右两栏div顺序任意。
            <div class="left">               
            </div>
            <div class="right">
            </div>
            <div class="middle">   
            </div> -->
           
    
    </body>
    </html>

具体参照三种三栏网页布局自适应

Lee_Blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三种三栏网页布局自适应

三种三栏网页布局自适应三种方法：1.绝对定位法2.margin负值法3.自身浮动法（左栏左浮动，右栏右浮动，主体直接放后面） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
复制链接

扫一扫

专栏目录