CSS垂直三列居中，中間自適應 - pssp－IT工程師數位筆記本

文章出處

<!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>