zoukankan      html  css  js  c++  java
  • 页面分栏布局

    1)用BDC实现分2栏:右栏自适应
       <style>
            *{
                margin:0;
                padding:0;
            }
            html,body{
                height:100%;
            }
            .box{
                100%;
                height:100%;
                background:orange;
            }
            .left{
                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%;
                    100%;
               }
               body{
                   display: flex;
               }
               nav{
                   background-color: tomato;
                    200px;
               }
               section{
                   background-color: thistle;
                   flex: 1;
               }
               aside{
                   background-color: teal;
                    100px;
               }
            </style>
        </head>
        <body>
            <nav></nav>
            <section></section>
            <aside></aside>
        </body>
    
    3)用BFC实现分3栏,中间一栏自适应
     <style>
            *{
                margin:0;
                padding:0;
            }
            html,body{
                height:100%;
            }
            .box{
                100%;
                height:100%;
                background:purple;
            }
    
            .left{
                200px;
                height:100%;
                float:left;
                background:pink;
            }
            .center{
                height:100%;
                background:green;
                overflow:hidden;
            }
            .right{
                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{
                100%;
                height:100%;
                background:purple;
            }
            .left{
                200px;
                height:100%;
                background:pink;
                float:left;
            }
            .right{
                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{
                100%;
                height:100%;
                background:grey;
            }
            .left{
                200px;
                height:90%;
                background:pink;
                float:left;
            }
            .right{
                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>
    
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    浅谈Java中的深拷贝和浅拷贝(转载)
    浅析Java中的final关键字
    Java内部类详解
    那些年震撼我们心灵的音乐
    深入理解Java的接口和抽象类
    Java:类与继承
    Java中的static关键字解析
    Java垃圾回收机制
    java 字节流和字符流的区别 转载
    Java 输入输出流 转载
  • 原文地址:https://www.cnblogs.com/cupid10/p/12722473.html
Copyright © 2011-2022 走看看