zoukankan      html  css  js  c++  java
  • 圣杯/双飞翼布局

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

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

    显示如图:

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

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
        <style type="text/css">
        .container {
           100%;
          height: 300px;
        }
        .container > div {
            float: left;
        }
        .left, .right {
             60px;
            height: 100%;
        }
        .left {
            background-color:red;
        }
        .right {
            background-color:blue;
        }
        .main {
             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{
                100%;
                height:300px;
                position:relative;
             }
            .container > div{
                position:absolute;
                height:100%;
             }
            
            .left,.right{
               100px;
             }
            .left{
                left:0;
                background-color:green;
             }
            .right{
                right:0;
                background-color:blue;
             }
            .main{
                 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{
                100%;
                height:300px;
                display:flex;
             }
            .container > div{
                height:100%;
             }
            
            .left,.right{
               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>

    .

  • 相关阅读:
    Jquery ajax异步传值的两个实用的方法,你看后肯定会用第二个
    C# ASP.NET 转换为int型的方法 很实用
    NetCore 发送邮件
    解决Visual Studio For Mac Restore失败的问题
    (转)JSONObject的toBean 和 fromObject
    javax.servlet不存在的问题
    关于范式的解说
    在远程连接mysql数据库出现问题怎么办
    (二)SpringCloud学习系列-SpringCloud
    (一)SpringCloud学习系列-微服务
  • 原文地址:https://www.cnblogs.com/crazycode2/p/10661418.html
Copyright © 2011-2022 走看看