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

    实现一个三列布局  左右固定  中间mainDIV 根据窗体大小而改变

    <html>
    
    <head>
        <meta name="description" content="[三列布局 3 Cols]">
        <style type="text/css">
        body {
            margin: 0;
        }
        
        .way1 .left {
            width: 180px;
            height: 200px;
            float: left;
            background: #F39;
        }
        
        .way1 .right {
            width: 200px;
            height: 200px;
            float: right;
            background: #F99;
        }
        
        .way1 .center {
            width: auto;
            height: 200px;
            margin-left: 190px;
            margin-right: 210px;
            background: #C9C;
        }
        
        .way2 {
            padding: 0 150px 0 100px;
        }
        
        .way2 .main {
            float: left;
            height: 200px;
            width: 100%;
            /*将占满父元素的内容区域(padding内的区域)*/
            
            background: #C9C;
        }
        
        .way2 .left {
            float: left;
            height: 200px;
            width: 100px;
            margin-left: -100%;
            left: -100px;
            position: relative;
            background: #F39;
        }
        
        .way2 .right {
            float: left;
            position: relative;
            height: 200px;
            width: 150px;
            margin-left: -150px;
            /*原本这一行装不下  会到下一行去*/
            /*恰好使这个DIV的开始摆放位置减少150  就和main一行了*/
            
            left: 150px;
            /*虽然是和main一行了 但是main右边有150大小的位置被遮住了*/
            
            background: #F99;
        }
        </style>
    </head>
    
    <body>
        <div class="way1">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                这种写法对HTML的顺序有要求
                <p>两个浮动的元素要写在非浮动元素前面</p>
            </div>
        </div>
        <div class="way2">
            <div class="main">圣杯布局(双飞翼布局) 同样对DIV顺序摆放有要求</div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
    
    </html>
  • 相关阅读:
    iOS热更新-8种实现方式
    HTTPS分析-简单易懂
    猖獗的假新闻:2017年1月1日起iOS的APP必须使用HTTPS
    iOS的ATS配置
    Objective-C中block的底层原理
    iOS系列文章
    UIViewController生命周期-完整版
    缩放因子和UI设计
    iOS APP 如何做才安全
    逆向工程
  • 原文地址:https://www.cnblogs.com/cart55free99/p/4440416.html
Copyright © 2011-2022 走看看