zoukankan      html  css  js  c++  java
  • 三栏布局--圣杯与双飞翼

    圣杯布局

    特点: 

    1、按照中间部分、左部分、右部分的顺序排列;

    2、容器的子元素都是浮动布局 float: left

    3、容器设置padding为两侧腾出空间;

    4、中间部分宽度为100%;

    5、两侧都是相对定位,左部分margin: -100%, left: 负自身宽度, 右部分margin: 负自身宽度, right: 负自身宽度

    eg:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>圣杯</title>
            <style type="text/css">
                .bd {
                    height: 300px;
                    padding: 0 100px;
                }
                .bd >*{
                    height: 300px;
                    float: left;
                }
                .main {
                    width: 100%;
                    background: red;
                }
                .left {
                    width: 100px;
                    background: yellow;
                    margin-left: -100%;
                    left: -100px;
                    position: relative;
                }
                .right {
                    width: 100px;
                    background: blue;
                    margin-left: -100px;
                    right: -100px;
                    position: relative;
                }
            </style>
        </head>
        <body>
            <div class="bd">
                <div class="main"></div>
                <div class="left"></div>
                <div class="right"></div>
            </div>
        </body>
    </html>
    View Code

    效果如下:

    但这种布局有一个重要的缺陷,就是当main小于两侧时,会发生崩坏

    --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    2.双飞翼布局

    双飞翼布局算是对圣杯布局的一种改进

    特点: (灰白色为不需要的特性)

    1、按照中间部分、左部分、右部分的顺序排列;

    2、容器的子元素都是浮动布局 float: left;

    3、容器设置padding为两侧腾出空间;

    4、中间部分宽度为100%;

    5、两侧都是相对定位,左部分margin: -100%, left: 负自身宽度, 右部分margin: 负自身宽度, left: 负自身宽度;

    6.中间部分添加子元素,这是内容区域。

    eg:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>双飞翼</title>
            <style type="text/css">
                .bd {
                    height: 300px;
                }
                .bd >*{
                    height: 300px;
                    float: left;
                }
                .main {
                    width: 100%;
                    background: red;
                }
                .content {
                    margin: 0 100px;
                    height: 100%;
                }
                .left {
                    width: 100px;
                    background: yellow;
                    margin-left: -100%;
                }
                .right {
                    width: 100px;
                    background: blue;
                    margin-left: -100px;
                }
            </style>
        </head>
        <body>
            <div class="bd">
                <div class="main">
                    <div class="content"></div>
                </div>
                <div class="left"></div>
                <div class="right"></div>
            </div>
        </body>
    </html>
    View Code

    这样就不会发生崩坏问题,而且布局更为简单。

  • 相关阅读:
    [ACM] POJ 3687 Labeling Balls (拓扑排序,反向生成端)
    xml和json选择奖
    android 如何分析java.lang.IllegalArgumentException: Cannot draw recycled bitmaps异常
    代码农民提高生产力
    &#39;Basic&#39; attribute type should not be a persistence entity/a container
    13 适配器
    密码学基础知识(四)分组密码
    PKCS #1 RSA Encryption Version 1.5 填充方式
    rsa加密--选择padding模式需要注意的问题。。。
    RSA PKCS1 填充方式
  • 原文地址:https://www.cnblogs.com/yanze/p/8042192.html
Copyright © 2011-2022 走看看