聖盃佈局原碼

時間 2019-11-16

標籤佈局原碼简体版

原文原文鏈接

給三個div設置左浮動，由於父容器設置了padding值，中間main的寬度等於芙蓉區內容的寬度，
設置左右兩側的寬度爲190px;父容器padding值爲200px;設置190px;是爲了方便查看顯示效果：
左邊設置margin-left:-100%;是爲了讓左側欄移動到元素最左側，右邊設置margin-left:-190px;是讓其移動到最右側；
設置position:relative;right:-200px;
是爲了讓右側欄填充父元素的padding-right值空出來的位置，不要覆蓋main上面在同一行位置；設置左側欄posotion:relative;left:-200px;是爲了讓左側欄填充
父元素左側的padding-left值html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .page {
            padding: 0 200px; /*設置父容器左右padding值爲200px*/
            min-width: 200px;
        }
        .main {
            width: 100%;
            height: 30px;
            background-color: skyblue;
            float: left;
        }
        .left {
            width: 190px;    /*設置左邊佈局寬度爲190px*/
            height: 30px;
            background-color: blue;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right {
            width: 190px;    /*設置左邊佈局寬度爲190px*/
            height: 30px;
            background-color: pink;
            float: left;    
            margin-left: -190px;
            position: relative;
            right: -200px;
        }
        /*聖盃佈局*/
    </style>
</head>
<body>
    <div class="page">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

聖盃佈局代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。