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

    圣杯布局和双飞翼布局主要用来解决以下问题:

    1.三列布局,两侧定宽,中间自适应。2.中间栏在浏览器中优先加载渲染。

    解决思路:

    首先把中间的div写到前面,然后左侧,然后右侧。这样就解决了第二个问题,中间的div优先渲染。

    但是这样会存在一个问题,写到前面的也会显示在前面。

    为了解决这个问题,我们让这三列都浮动起来。然后设置中间列宽度为100%。

    此时中间列在第一行,左右都在第二行。此时只需要将左列移动到中间的左边,右列移动到中间的右边。我们给左右加一个固定宽度,比如150px。

    然后给左列加一个负边距,margin-left:-100%;右列加一个负边距margin-left:-150px;

    此时可以看到三列布局已经形成。但是问题在于,中间div的内容被挡住了。在解决这个问题上,圣杯布局和双飞翼布局开始出现不同的思路。

    圣杯布局首先给三列div外面套上一个div,我们可以使用语义化标签article。将article设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative。此时可以看到三列都向中间缩进了。然后再分别给左右两列增加right和left的负值,就可以达到目的了。

    代码如下:

    圣杯布局html代码:

    <
    body> <article> <div class="main"> 我是中间 </div> <div class="left"> 我是左 </div> <div class="right"> 我是右 </div> </article> </body>
    圣杯布局css代码:
    
    *{
        margin: 0;
        padding: 0;
    }
    article{
        padding-left:150px;
        padding-right:150px;
    }
    .main{
        background-color: lightblue;
        width:100%;   
    }
    .left{
        background-color: yellowgreen;
        width:150px;
        margin-left:-100%;
        position: relative;
        /*left:-150px;*/
    }
    .right{
        background-color: pink;
        width:150px;
        margin-left:-150px;
        position: relative;
        /*right:-150px;*/
    }
    .main,.left,.right{
        float: left;
    }

    双飞翼布局则是在中间div内部创建子div用于放置内容,在该子div里用margin-left和margin-right为左右两栏div留出位置。

    代码如下:

    双飞翼布局html代码:
    
    <body>
        <div class="main">
            <div class="inside">
            我是中间
            </div>           
        </div>
        <div class="left">
            我是左
        </div>
        <div class="right">
            我是右
        </div>
    </body>
    双飞翼布局css代码:
    
    *{
        margin: 0;
        padding: 0;
    }
    .main{
        background-color: lightblue;
        width:100%;   
    }
    .inside{
        margin-left:150px;
        margin-right:150px;
    }
    .left{
        background-color: yellowgreen;
        width:150px;
        margin-left:-100%;
    }
    .right{
        background-color: pink;
        width:150px;
        margin-left:-150px;
    }
    .main,.left,.right{
        float: left;
    }

    接下来如果我们想让三列等高,可以给三列分别增加属性padding-bottom: 9999px;margin-bottom: -9999px;来将三列拉到无限长。再给三列外面的article标签加上overflow: hidden;属性就行了。

    Ending。

  • 相关阅读:
    多层装饰器执行顺序
    flask之 中间件 蓝图 falsk请求上下文 rquirements.txt threading.local 偏函数
    flask 之 在flask中使用websocket
    flask 之项目分文件使用sqlalchemy+flask-migrate djagno多数据库
    flask之六 sqlachemy详解 scoped_session线程安全 基本增删改查 多对多关系建立和操作 flask-sqlalchemy的使用
    远程连接linux开发项目
    INT104-lab9
    INT104-lab8
    INT104-lab7
    Java-数据结构-泛型BST-CPT102-tutorial Week6
  • 原文地址:https://www.cnblogs.com/weirihan/p/5957937.html
Copyright © 2011-2022 走看看