zoukankan html css js c++ java

CSS垂直三列居中，中间自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 让页面的高100%，如果不设置html，body 高100%的话，我们后面设置div高100%就没有效果了 */
        html,body{
            width:100%;
            height:100%;
        }
        body,div{
            margin:0;
            padding:0;
        }
        /* 注意这里我给盒子添加了一个右边padding200px ，让中的那个盒子空200px给右边的盒子*/
        #box{
            position:relative;
            padding-right:200px;
            height:100%;
        }
        /* 让盒子左浮动 */
        #box .left{
            float:left;
            width:200px;
            height:100%;
            background-color:blue;
        }
        /* overflow让盒子独立出来，触动BFC，这里不设置overflow:hidden;的话他的宽就是100%了，但是我需要让他把左边的盒子的宽度空出来 */
        #box .con{
            overflow:hidden;
            height:100%;
            background-color:pink;
        }
        /* 这里不能设置浮动，只能是定位，因为中间的那个盒子没有浮动，所以中间的那个盒子会占据位置，只能用定位来做。 */
        #box .right{
            position:absolute;
            right:0;
            top:0;
            width:200px;
            height:100%;
            background-color:#000;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="left"></div>
        <div class="con"></div>
        <div class="right"></div>
    </div>
</body>
</html>

查看全文

相关阅读:
matrix_last_acm_4
matrix_last_acm_3
matrix_last_acm_2
matrix_last_acm_1
2015亚洲区北京站网络赛
 poj 1062 昂贵的聘礼最短路
 2-SAT ！！
hdu 4925
hdu 4927 Java大数
 poj3687 拓扑排序还没怎么搞明白回头再想想

原文地址：https://www.cnblogs.com/pssp/p/5367898.html