圣杯/双飞翼布局

Posted 2021-02-15 crazycode2

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了圣杯/双飞翼布局相关的知识，希望对你有一定的参考价值。

圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局

三列布局，中间宽度自适应，两边定宽
中间栏要在浏览器中优先展示渲染
允许任意列的高度最高

显示如图：

技术图片

(1)、浮动布局（float+calc）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
    <style type="text/css">
    .container {
      width: 100%;
      height: 300px;
    }
    .container > div {
        float: left;
    }
    .left, .right {
        width: 60px;
        height: 100%;
    }
    .left {
        background-color:red;
    }
    .right {
        background-color:blue;
    }
    .main {
        width: calc(100% - 120px);
        height: 100%;
        background-color:green;
    }
    </style>
</head>
<body>

<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

</body>
</html>

(2)、绝对布局（absolute+calc）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
    <style>
        .container{
            width:100%;
            height:300px;
            position:relative;
         }
        .container > div{
            position:absolute;
            height:100%;
         }
        
        .left,.right{
           width:100px;
         }
        .left{
            left:0;
            background-color:green;
         }
        .right{
            right:0;
            background-color:blue;
         }
        .main{
            width: calc(100% - 200px);
            left:100px;
            background-color:red;
         }
    </style>
</head>
<body>

    <div class="container">
        <div class="left"></div>
         <div class="main"></div>
        <div class="right"></div>
    </div>
    
</body>
</html>

(3)、flex布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
    <style>
        .container{
            width:100%;
            height:300px;
            display:flex;
         }
        .container > div{
            height:100%;
         }
        
        .left,.right{
           width:60px;
         }
        .left{
            background-color:green;
         }
        .right{
            background-color:blue;
         }
        .main{
            flex:1;
            background-color:red;
         }
    </style>
</head>
<body>

    <div class="container">
        <div class="left"></div>
         <div class="main"></div>
        <div class="right"></div>
    </div>
    
</body>
</html>

以上是关于圣杯/双飞翼布局的主要内容，如果未能解决你的问题，请参考以下文章