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开发中BASE64Encoder的使用
 解决waiting for target deviceto come online的做法
 团队冲刺（五）
团队冲刺（四）
CSS布局 ——从display，position， float属性谈起
 让图表的Y轴产生几个刻度距离
 CSS行高——line-height 垂直居中等问题

原文地址：https://www.cnblogs.com/cupid10/p/15617839.html