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>
  • 相关阅读:
    java.io.file
    连线小游戏
    发票类型区分的正则表达式(仅区分普票专票)
    mybatis: No enum constant org.apache.ibatis.type.JdbcType."VARCHAR"
    bootstrap inputfile 使用-上传,回显
    微积分极限中一例
    oracle 查看表结构语句
    redis无法连接
    项目配置shiro原缓存注解失效
    bug 找不到或无法加载主类main.java.*
  • 原文地址:https://www.cnblogs.com/cart55free99/p/4440416.html
Copyright © 2011-2022 走看看