zoukankan      html  css  js  c++  java
  • css布局笔记(三)圣杯布局,双飞翼布局

    圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染。

    圣杯布局如下

    <!-- 圣杯布局 -->
    <!DOCTYPE html>
    <html>
    <head>
    <style>      
            .con {
                padding-left: 150px;
    	    padding-right: 190px;
            }
            .left{
                background: #E79F6D;
                150px;
                float:left;
                margin-left: -100%;
                position: relative;
                left:-150px;
            }
            .main{
                background: #D6D6D6;
                100%;
                float:left;	
            }
            .right{
                background: #77BBDD;
                190px;
                float:left;
                margin-right: -190px;
                position: relative;
                right: -190px;
            }
     
    </style>
     
    </head>
        <body>
    	<div class="con">
        		<div class="main">Main</div>
       	 	 <div class="left">Left</div>
        		<div class="right">Right</div>
    	</div>
        </body>
    </html>
    

    圣杯布局和双飞翼布局的区别: 解决”中间栏div内容不被遮挡“问题的思路不一样:

    圣杯布局
    为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。
    双飞翼布局
    为了中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该子div里用margin-left和margin-right为左右两栏div留出位置。
    多了1个div,少用大致4个css属性(圣杯布局中间div的padding-left和padding-right这2个属性,加上左右两个div用相对布局position: relative及对应的right和left共4个属性,一共6个;而双飞翼布局子div里用margin-left和margin-right共2个属性,6-2=4).

    参考:https://blog.csdn.net/ivana_zyf/article/details/79149455
    https://blog.csdn.net/Night_Nine_Leaves/article/details/79660762

  • 相关阅读:
    线段树优化建图 && CF-786B.Legacy(优化建图,dijkstra)
    构建高性能JavaScript应用
    关于互联网应用前端架构的一些思考
    Router模块
    View模块
    Backbone源码解析系列
    Model模块
    Events模块
    Backbone源码风格
    jQuery选择器总结
  • 原文地址:https://www.cnblogs.com/breathee/p/9334226.html
Copyright © 2011-2022 走看看