页面分栏布局

最新推荐文章于 2024-04-27 22:13:08 发布

郑怪兽

最新推荐文章于 2024-04-27 22:13:08 发布

阅读量330

点赞数

分类专栏： HTML&CSS 文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_46285142/article/details/107352147

版权

HTML&CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1）用BDC实现分2栏：右栏自适应

<style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height:100%;
        }
        .box{
            width:100%;
            height:100%;
            background:orange;
        }
        .left{
            width:200px;
            height:100%;
            background:pink;
            /* 浮动 */
            float:left;
        }
        .right{
            height:100%;
            background:green;
            /* bfc区域不会与浮动盒子重叠 */
            overflow:hidden;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">111111111</div>
    </div>
</body>

2）弹性盒实现中间一栏自适应

<style>
            *{
                margin: 0;
                padding: 0;
            }
           html,body{
               height: 100%;
               width: 100%;
           }
           body{
               display: flex;
           }
           nav{
               background-color: tomato;
               width: 200px;
           }
           section{
               background-color: thistle;
               flex: 1;
           }
           aside{
               background-color: teal;
               width: 100px;
           }
        </style>
    </head>
    <body>
        <nav></nav>
        <section></section>
        <aside></aside>
    </body>

3）用BFC实现分3栏，中间一栏自适应

<style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height:100%;
        }
        .box{
            width:100%;
            height:100%;
            background:purple;
        }

        .left{
            width:200px;
            height:100%;
            float:left;
            background:pink;
        }
        .center{
            height:100%;
            background:green;
            overflow:hidden;
        }
        .right{
            width:200px;
            height:100%;
            float:right;
            background:#dd0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
        <!-- 自适应的一栏一定要写在最后-->
    </div>
</body>

4）用padding实现分三栏，中间一栏自适应

<style>*{
            margin:0;
            padding:0;
        }
        html,body{
            height:100%;
        }
        .box{
            width:100%;
            height:100%;
            background:purple;
        }
        .left{
            width:200px;
            height:100%;
            background:pink;
            float:left;
        }
        .right{
            width:200px;
            height:100%;
            background:#dd0;
            float:right;
        }
        /* 中间的板块 */
        .center{
            height:100%;
            background:red;
            /* 用padding 把center的子元素挤到中间 */
            padding:0 200px;
        }
        .center-con{
            height:100%;
            background:#ccc;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <div class="center-con"></div>
        </div>
    </div>
</body>

5）用margin实现分3栏，中间一栏自适应

<style>
        *{
            margin:0;
            padding:0;
        }
        body,html{
            height:100%;
        }
        .box{
            width:100%;
            height:100%;
            background:grey;
        }
        .left{
            width:200px;
            height:90%;
            background:pink;
            float:left;
        }
        .right{
            width:200px;
            height:90%;
            background:blue;
            float:right;
        }
        .center{
            height: 100%;
            background:#dd0;
            margin:0 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</body>

郑怪兽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
页面分栏布局

1）用BDC实现分2栏：右栏自适应<style> *{ margin:0; padding:0; } html,body{ height:100%; } .box{ width:100%; height:100%; background:orange; }
复制链接

扫一扫