<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>圣杯布局</title>

    <style type="text/css">

    body {background-color: #ffffff; font-size:14px;}

    #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;}

    .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;}

    .main {background-color: #03a9f4; color:#ffffff;}

    .aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;}

    p {margin:0; padding:20px; text-align: center;}

    /* 左侧栏固定宽度，右侧自适应 */

    .bd-lft {

        zoom:1;

        overflow:hidden;

        padding-left:210px;

    }

    .bd-lft .aside {

        float:left;

        width:200px;

        margin-left:-100%; /*= -100%*/

        position:relative;

        left:-210px; /* = -parantNode.paddingLeft */

        _left: 0; /*IE6 hack*/

    }

    .bd-lft .main {

        float:left;

        width:100%;

    }

    /* 右侧栏固定宽度，左侧自适应 */

    .bd-rgt {

        zoom:1;

        overflow:hidden;

        padding-right:210px;

    }

    .bd-rgt .aside {

        float:left;

        width:200px;

        margin-left:-200px; /* = -this.width */

        position:relative;

        right:-210px; /* = -parantNode.paddingRight */

    }

    .bd-rgt .main {

        float:left;

        width:100%;

    }

    /* 左中右 三栏自适应 */

    .bd-3-lr {

        zoom:1;

        overflow:hidden;

        padding-left:210px;

        padding-right:210px;

    }

    .bd-3-lr .main {

        float:left;

        width:100%;

    }

    .bd-3-lr .aside-1 {

        float: left;

        width:200px;

        margin-left: -100%;

        position:relative;

        left: -210px;

        _left: 210px; /*IE6 hack*/

    }

    .bd-3-lr .aside-2 {

        float: left;

        width:200px;

        margin-left: -200px;

        position:relative;

        right: -210px;

    }

    /* 都在左边，右侧自适应 */

    .bd-3-ll {

        zoom:1;

        overflow:hidden;

        padding-left:420px;

    }

    .bd-3-ll .main {

        float:left;

        width:100%;

    }

    .bd-3-ll .aside-1 {

        float: left;

        width:200px;

        margin-left: -100%;

        position:relative;

        left: -420px;

        _left: 0px; /*IE6 hack*/

    }

    .bd-3-ll .aside-2 {

        float: left;

        width:200px;

        margin-left: -100%;

        position:relative;

        left: -210px;

        _left: 210px; /*IE6 hack*/

    }

    /* 都在右边，左侧自适应 */

    .bd-3-rr {

        zoom:1;

        overflow:hidden;

        padding-right:420px;

    }

    .bd-3-rr .main {

        float:left;

        width:100%;

    }

    .bd-3-rr .aside-1 {

        float: left;

        width:200px;

        margin-left: -200px;

        position:relative;

        right: -210px;

    }

    .bd-3-rr .aside-2 {

        float: left;

        width:200px;

        margin-left: -200px;

        position:relative;

        right: -420px;

    }

    </style>

</head>

<body>

    <div id="hd">头部</div>

    <div class="bd-lft">

        <div class="main">

            <p>主内容栏自适应宽度</p>

        </div>

        <div class="aside">

            <p>侧边栏固定宽度</p>

        </div>

    </div>

    <div class="bd-rgt">

        <div class="main">

            <p>主内容栏自适应宽度</p>

        </div>

        <div class="aside">

            <p>侧边栏固定宽度</p>

        </div>

    </div>

    <div class="bd-3-lr">

        <div class="main">

            <p>主内容栏自适应宽度</p>

        </div>

        <div class="aside-1">

            <p>侧边栏1固定宽度</p>

        </div>

        <div class="aside-2">

            <p>侧边栏2固定宽度</p>

        </div>

    </div>

    <div class="bd-3-ll">

        <div class="main">

            <p>主内容栏自适应宽度</p>

        </div>

        <div class="aside-1">

            <p>侧边栏1固定宽度</p>

        </div>

        <div class="aside-2">

            <p>侧边栏2固定宽度</p>

        </div>

    </div>

    <div class="bd-3-rr">

        <div class="main">

            <p>主内容栏自适应宽度</p>

        </div>

        <div class="aside-1">

            <p>侧边栏1固定宽度</p>

        </div>

        <div class="aside-2">

            <p>侧边栏2固定宽度</p>

        </div>

    </div>

    <div id="ft">底部</div>

</body>

</html>

CSS布局方案之圣杯布局的更多相关文章

  1. css实现三栏水平布局双飞翼与圣杯布局

    作为布局的入门级选手,网上也查看了很多信息和资源 双飞翼的html结构 <div class="container"> <div class="main ...

  2. CSS之圣杯布局与双飞翼布局

    圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head>    <meta charset="utf-8"& ...

  3. CSS 圣杯布局 / 双飞翼布局的实现

    工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...

  4. css三栏布局方案整理

    日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...

  5. CSS经典布局——圣杯布局与双飞翼布局

    一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...

  6. 【布局】圣杯布局&双飞翼布局

    背景 随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码"如果三排布局能将中间的模块 ...

  7. 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局

    一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...

  8. css两列等高布局

    布局方案 等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法.首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个 ...

  9. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

随机推荐

  1. Udacity调试课笔记之断言异常

    Udacity调试课笔记之断言异常 这一单元的内容不是很多,如Zeller教授所说,就是如何写.检查断言,并如何使用工具实现自动推导出断言的条件. 现在,多数的编程语言,尤其是高级编程语言都会有内置的 ...

  2. 免费自学Cocos2d-x3.0final2014原创视频教程（56集）(适用于Cocos2d-x3.1 Cocos2d-x3.2版本号全)

    Cocos2d-x3.0final(适用于Cocos2d-x3.1 Cocos2d-x3.2版本号全) 视频播放地址:http://yun.itxdl.cn/course/62 视频下载地址:http ...

  3. FileSystemWatcher使用方法具体解释

    FileSystemWatcher控件主要功能: 监控指定文件或文件夹的文件的创建.删除.修改.重命名等活动.能够动态地定义须要监控的文件类型及文件属性修改的类型. 1.经常使用的几个基本属性: (1 ...

  4. linux修改系统时间

    当你把linux还原到某个点的时候,vmware帮不了你把系统时间也给重设了.所以这时候就要手工来搞.关于咋设linux时间.网上介绍也很多,但是都是抄来抄去的东西.那怎么才能高效快捷的设置系统时间呢 ...

  5. MongoDB学习笔记04

    创建索引使用ensureIndex方法,对于同一个集合,同样的索引只需要创建一次,反复创建是徒劳的. 对某个键的索引会加速对该键的查询,然而,对于其它查询可能没有帮助,即便是查询中包含了被索引的键.实 ...

  6. Android PackageManager基础知识

    一.PackageManagerService启动过程 SystemServer首先启动,创建一个ServerThread线程来启动所有Android核心服务,其中PackageManagerServ ...

  7. 调用[[UIDevice currentDevice] userInterfaceIdiom]==UIUserInterfaceIdiomPad判断设备

    将模拟器改为Ipad时,调用[[UIDevice currentDevice] userInterfaceIdiom]==UIUserInterfaceIdiomPad判断设备是否为Ipad,但程序并 ...

  8. 0128——手势Gesture

    UIGestureRecognizer: 1.locationinView 获取手势在某个视图里面的坐标位置 2.delegate监听手势的行为 3.state状态 开始:UIGestureRecog ...

  9. .Net平台下ActiveMQ入门实例(转)

    1.ActiveMQ简介 先分析这么一个场景:当我们在网站上购物时,必须经过,下订单.发票创建.付款处理.订单履行.航运等.但是,当用户下单后,立即跳转到"感谢那您的订单" 页面. ...

  10. （原）caffe中通过图像生成lmdb格式的数据

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5909121.html 参考网址: http://www.cnblogs.com/wangxiaocvp ...