圣杯/双飞翼布局

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

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

显示如图：

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

.

posted @ 2019-04-08 23:00  每天都要进步一点点  阅读(331)  评论(0)    收藏  举报