CSS佈局——左右固定中間填滿

時間 2019-12-14

標籤 css 佈局左右固定中間填滿欄目 CSS 简体版

原文原文鏈接

小小例子，注意中間的div應該寫在最後，留爪。css

先上個高清無碼圖

源碼實現

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="reset.css" rel="stylesheet" /> <!--重置默認樣式,你能夠把這句註釋掉-->
    <style>
        div {
            line-height:60px; /*讓字體垂直居中*/
        }

        div.box {
            width: 100%;
            height: 60px;
            background: yellow;
            text-align: center; /*讓字體水平居中*/
            color: white;
        }

            div.box div.left, div.right {
                width: 60px;
                height: 60px;
                background: red;                
            }

            div.box div.left {
                float: left;
            }

            div.box div.right {
                float: right;
            }

            div.box div.center {
                height: 60px;
                background: green;      
                margin: 0 60px 0 60px; /*這句不要忘了，用來分開左右部分*/          
            }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左固定</div>
        <div class="right">右固定</div>
        <div class="center">中間填滿</div>      
    </div>
</body>
</html>

相關標籤/搜索