zoukankan      html  css  js  c++  java
  • 几种常见的css布局_l流体布局、圣杯布局、双飞翼布局

    1.流体布局:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>流体布局</title>
    <style type="text/css">
    .left {
    float: left;
    100px;
    height: 200px;
    background: red;
    }
    .right {
    float: right;
    200px;
    height: 200px;
    background: blue;
    }
    .main {
    margin-left: 120px;
    margin-right: 220px;
    height: 200px;
    background: green;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
    </div>
    </body>
    </html>

    2.圣杯布局:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>圣杯布局</title>
    <style type="text/css">
    .container {
    margin-left: 120px;
    margin-right: 220px;
    }
    .main {
    float: left;
    100%;
    height:300px;
    background: green;
    }
    .left {
    position: relative;
    left: -120px;
    float: left;
    height: 300px;
    100px;
    margin-left: -100%;
    background: red;
    }
    .right {
    position: relative;
    right: -220px;
    float: right;
    height: 300px;
    200px;
    margin-left: -200px;
    background: blue;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
    </div>
    </div>
    </body>
    </html>

    3.双飞翼布局:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>双飞翼布局</title>
    <style type="text/css">
    .content {
    float: left;
    100%;
    }
    .main {
    height: 200px;
    margin-left: 110px;
    margin-right: 220px;
    background: green;
    }
    .main::after {
    content: '';
    display: block;
    font-size:0;
    height: 0;
    zoom: 1;
    clear: both;
    }
    .left {
    float:left;
    height: 200px;
    100px;
    margin-left: -100%;
    background: red;
    }
    .right {
    float: right;
    height: 200px;
    200px;
    margin-left: -200px;
    background: blue;
    }
    </style>
    </head>
    <body>
    <div class="content">
    <div class="main"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
    </body>
    </html>

  • 相关阅读:
    Luogu P4246 [SHOI2008]堵塞的交通(线段树+模拟)
    Luogu P2619 [国家集训队2]Tree I(WQS二分+最小生成树)
    Luogu P2042 [NOI2005]维护数列(平衡树)
    Luogu P1052 过河(dp)
    Luogu P1041 传染病控制(搜索)
    Luogu P2717 寒假作业(平衡树)
    Luogu P2822 组合数问题(前缀和)
    Luogu P2827 蚯蚓(模拟)
    随机图片测试
    Luogu P2458 [SDOI2006]保安站岗(树形dp)
  • 原文地址:https://www.cnblogs.com/robot666/p/11249721.html
Copyright © 2011-2022 走看看