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

    一、圣杯设计思路:

    DOM结构:

    <div class="container">

        <div class="main">main</div>

        <div class="left">left</div>

        <div class="right">right</div>

    </div>

    思路:

    1.将div.container通过padding来设置左右的空闲位置来让左右栏占据,所以设置padding-left为左栏宽度,padding-right为右栏宽度。

    2.让三个元素统一左浮动,从左到右开始顺序为main,left,right。

    3.然后设置div.main的宽度为100%,让它占据container的一行内容。

    4.设置左栏的margin-left为-100%,右栏margin-left为其width的负值,这样左栏和右栏就会分别在main的左右两边

    5.设置左右栏为相对定位,然后将左右栏定位到左右的空白处


    圣杯布局

    参考代码:


     

    二、双飞翼布局设计思路:

    DOM结构:

    <div>

        <div class="main">

            <div class="content"></div>

        </div>

        <div class="left"></div>

        <div class="right"></div>

    <div/>

    思路:

    与圣杯布局相类似,但因为双飞翼布局,采取了div.main中嵌套一个div.content,因此,利用div.content设置margin,来让左右两边腾出位子来让左右栏,就不需要使用相对定位了:

    1.设置div.main的宽度为100%,让它占据container的一行内容。

    2.让三个元素统一左浮动,从左到右开始顺序为main,left,right。

    3.设置左栏的margin-left为-100%,右栏margin-left为其width的负值,这样左栏和右栏就会分别在main的左右两边

    4.div.content设置margin,来让左右两边腾出位子来让左右栏占据。

    参考代码:


     
  • 相关阅读:
    亚马逊EMR学习网站
    python实现redis三种cas事务操作
    【转】Jython简单入门
    【转】Android 收集已发布程序的崩溃信息
    【转】Android 避免APP启动闪黑屏(Theme和Style)
    【转】Android内存机制分析2——分析APP内存使用情况
    【转】Android内存机制分析1——了解Android堆和栈
    【转】JAVA Socket用法详解
    【转】JAVA 网络编程
    Android 无法Bind Service
  • 原文地址:https://www.cnblogs.com/runhua/p/9566263.html
Copyright © 2011-2022 走看看