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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>双飞翼</title>
    </head>
    <style>
        *{
            margin: 0;
        }
        html, body {
            height: 100%;
        }
        /* 三个高度均为100%, float: left */
        .main_container, .left, .right{
            height: 100%; 
            float: left;
        }
        /* 两个宽度均为200px,或者你们随意设置 */
        .left, .right{
            width: 200px;
        }
    
        .left{
            background: palegreen;
            margin-left: -100%;  /* 能越过main,跑到最左边 */
        }
    
        .right{
            background: palevioletred;
            margin-left: -200px; /* 负的自己的宽度,这里是200px */
        }
    
        .main_container{
            background: plum;
            width: 100%;
        }
    
        .main_container .main{ /* margin 左右值为left和right宽度, 因为.main_container是被left和right盖住了,所以里面的内容区域,要设置margin值,跑到能看见的地方 */
            margin: 0 200px;
        }
    </style>
    <body>
        <div class="main_container">
            <div class="main">mainmainmainmainmainmainmainmainmainmai</div>
        </div>
        <div class="left">leftleftleftleft</div>
        <div class="right">rightrightrightrightright</div>
    </body>
    </html>
  • 相关阅读:
    第24课 #pragma使用分析
    第23课 #error和#line使用分析
    第22课 条件编译使用分析
    第21课 宏定义与使用分析
    Codeforces Round #142 (Div. 2)B. T-primes
    SPOJ XMAX
    Uva 10036
    Timus 1009. K-based Numbers
    MBLAST
    ROADS
  • 原文地址:https://www.cnblogs.com/yadiblogs/p/10729453.html
Copyright © 2011-2022 走看看