前端知識-聖盃佈局、雙飛翼佈局

阿新 • • 發佈：2021-01-19

技術標籤：# web 定位 css html

聖盃佈局

優點:

中間部分先載入，且中間自適應寬度，左右定寬。

實現方式:

main left right 設定float:left
left:margin-left:-100%;right:margin-left:-200px;
container padding: 0 200px;
left right 相對定位分別向左右移動 -200px;
container: 設定min-width:400px 防止視窗過小，頁面錯位

實現效果

在這裡插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,div{
            margin: 0;
            padding: 0;
        }
        .container{
            padding: 0 200px;
            min-width: 400px;
        }
        .container div{
            height: 200px;
        }
        .main{
            
            width: 100%;
            background-color: red;
            float: left;
        }
        .left,
        .right{
            position: relative;
            width: 200px;
            float: left;
            background-color: blue;
        }
        .left{
           margin-left: -100%;
           left: -200px;
        }
        .right{
            margin-left: -200px;
            right: -200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main">中</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
</html>

雙飛翼

實現方式

為main內套一個div
為main設定margin:0 200px
優點: 無須使用聖盃中為left right 設定相對定位無須為container設定padding

實現效果同上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,div{
            margin: 0;
            padding: 0;
        }
        .container{
            min-width: 400px;
        }
        .container div{
            height: 200px;
        }
        .main{
            width: 100%;
            background-color: red;
            float: left;
        }
        .main_w{
            margin: 0 200px;
        }
        .left,
        .right{

            width: 200px;
            float: left;
            background-color: blue;
        }
        .left{
           margin-left: -100%;

        }
        .right{
            margin-left: -200px;

        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main">
            <div class="main_w">中</div>
        </div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
</html>

絕對定位佈局

實現方式

無須為left right設定浮動只需絕對定位分別 left:0 right:0
container padding為0 20px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,div{
            margin: 0;
            padding: 0;
        }
        .container{
            position: relative;
            padding: 0 200px;
        }
        .container div{
            height: 200px;
        }
        .main{
            width: 100%;
            background-color: red;
            float: left;
        }
        .left,
        .right{
            width: 200px;
            position: absolute;
            background-color: blue;
            top: 0;
        }
        .left{
           left: 0;
        }
        .right{
            right: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main">中</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
</html>