圣杯布局

圣杯布局很完美（兼容所有浏览器，包括IE6），但是使用了相对定位，布局有局限性，宽度控制要改的地方也多。

第一种方法公用部分：

.lgyz, .lzrg, .lrzcg, .lcgrz, .lzcrg {margin:10px 0; min-width:400px;text-align: center;color:#ffffff; }

    .left {background-color: #4DBCB0; padding:20px 0;}

    .aside, .center, .right {background-color: #E35881;padding:20px 0; }

第二种方法都不考虑兼容IE8及以下。

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

第一种写法：

<div class="lgyz">

        <div class="left">主内容栏自适应宽度</div>

        <div class="aside">侧边栏固定宽度</div>

    </div>
.lgyz{zoom:;overflow:hidden;padding-left:210px;}

.lgyz .aside{float:left;width:200px;margin-left:-100%;position:relative;left:-210px;_left:;}

.lgyz .left{float:left;width:100%;}

第二种写法：

<div class="layout">

    <aside class="layout__aside">侧边栏宽度固定</aside>

    <div class="layout__main">主内容栏宽度自适应</div>

</div>
.layout:after {clear: both;content: " "; display: table;}

.layout__aside, .layout__main {float: left;}

.layout {padding-left: 210px;}

.layout__main {width: 100%;}

.layout__aside {width: 200px;margin-left: -210px;}

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

第一种写法：

<div class="lzrg">

　　<div class="left">主内容栏自适应宽度</div>

   <div class="aside">侧边栏固定宽度</div>

</div>
.lzrg{zoom:;overflow:hidden;padding-right:210px;}

.lzrg .aside{float:left;width:200px;margin-left:-200px;position:relative;right:-210px;}

.lzrg .left{float:left;width:100%;}

第二种写法：

<div class="layout">

    <div class="layout__main">主内容栏宽度自适应</div>

    <aside class="layout__aside">侧边栏宽度固定</aside>

</div>
.layout:after{clear:both;content:" ";display:table;}
.layout{padding-right:210px;}
.layout__main{width:100%;float:left;}
.layout__aside{float:right;width:200px;margin-right:-210px;}

左右固定   中间自适应

第一种：

<div class="lrzcg">

        <div class="left">主内容栏自适应宽度</div>

        <div class="center">侧边栏1固定宽度</div>

        <div class="right">侧边栏2固定宽度</div>

    </div>
.lrzcg{zoom:;overflow:hidden;padding-left:210px;padding-right:210px;}

 .lrzcg .left{float:left;width:100%;}

 .lrzcg .center{float:left;width:200px;margin-left:-100%;position:relative;left:-210px;_left:210px;}

 .lrzcg .right{float:left;width:200px;margin-left:-200px;position:relative;right:-210px;}

第二种：

<div class="layout">

    <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>

    <div class="layout__main">主内容栏宽度自适应</div>

    <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside>

</div>
.layout:after{clear:both;content:" ";display:table;}
.layout__aside,.layout__main{float:left;}
.layout{padding:0 210px;}
.layout__main{width:100%;}
.layout__aside{width:200px;}
.layout__aside--left{margin-left:-210px;}
.layout__aside--right{margin-right:-210px;float:right;}

第三种：

<div class="layout__main-wrapper">

    <div class="layout__main">主内容栏宽度自适应</div>

</div>

<aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>

<aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside>

<footer class="clear">底部</footer>
.clear{clear:both;}
.layout__main-wrapper,.layout__aside{float:left;}
.layout__main-wrapper{width:100%;}
.layout__main{margin:0 210px;}
.layout__aside{width:200px;}
.layout__aside--left{margin-left:-100%;}
.layout__aside--right{margin-left:-200px;}

都在左边，右侧自适应

第一种：

<div class="lcgrz">

        <div class="left">主内容栏自适应宽度</div>

        <div class="center">侧边栏1固定宽度</div>

        <div class="right">侧边栏2固定宽度</div>

    </div>
.lcgrz{zoom:;overflow:hidden;padding-left:420px;}

   .lcgrz .left{float:left;width:100%;}

   .lcgrz .center{float:left;width:200px;margin-left:-100%;position:relative;left:-420px;_left:0px;}

   .lcgrz .right{float:left;width:200px;margin-left:-100%;position:relative;left:-210px;_left:210px;}

第二种：

<div class="layout">

    <aside class="layout__aside layout__aside--first">第1个侧边栏宽度固定</aside>

    <aside class="layout__aside layout__aside--second">第2个侧边栏宽度固定</aside>

    <div class="layout__main">主内容栏宽度自适应</div>

</div>
.layout:after{clear:both;content:" ";display:table;}
.layout__aside,.layout__main{float:left;}
.layout{padding-left:420px;}
.layout__main{width:100%;}
.layout__aside{width:200px;}
.layout__aside--first{margin-left:-420px;}
.layout__aside--second{margin-left:-210px;}

都在右边，左侧自适应

第一种：

<div class="lzcrg">

        <div class="left">主内容栏自适应宽度</div>

        <div class="center">侧边栏1固定宽度</div>

        <div class="right">侧边栏2固定宽度</div>

    </div>
.lzcrg{zoom:;overflow:hidden;padding-right:420px;}

   .lzcrg .left{float:left;width:100%;}

   .lzcrg .center{float:left;width:200px;margin-left:-200px;position:relative;right:-210px;}

   .lzcrg .right{float:left;width:200px;margin-left:-200px;position:relative;right:-420px;}

第二种：

<div class="layout">

    <div class="layout__main">主内容栏宽度自适应</div>

    <aside class="layout__aside layout__aside--first">第1个侧边栏宽度固定</aside>

    <aside class="layout__aside layout__aside--second">第2个侧边栏宽度固定</aside>

</div>
.layout:after{clear:both;content:" ";display:table;}
.layout{padding-right:420px;}
.layout__main{width:100%;float:left;}
.layout__aside{width:200px;float:right;}
.layout__aside--first{margin-right:-210px;}
.layout__aside--second{margin-right:-420px;}

使用flex方法圣杯布局，每种布局做法的结果同上面一模一样，但是代码减少了很多，而且适用的场景更多

<div class="layout">

    <aside class="layout__aside">侧边栏宽度固定</aside>

    <div class="layout__main">主内容栏宽度自适应</div>

</div>

<div class="layout">

    <div class="layout__main">主内容栏宽度自适应</div>

    <aside class="layout__aside">侧边栏宽度固定</aside>

</div>

<div class="layout">

    <aside class="layout__aside">左侧边栏宽度固定</aside>

    <div class="layout__main">主内容栏宽度自适应</div>

    <aside class="layout__aside">右侧边栏宽度固定</aside>

</div>

<div class="layout">

    <aside class="layout__aside">第1个侧边栏宽度固定</aside>

    <aside class="layout__aside">第2个侧边栏宽度固定</aside>

    <div class="layout__main">主内容栏宽度自适应</div>

</div>

<div class="layout">

    <div class="layout__main">主内容栏宽度自适应</div>

    <aside class="layout__aside">第1个侧边栏宽度固定</aside>

    <aside class="layout__aside">第2个侧边栏宽度固定</aside>

</div>
.layout {margin:10px 0; min-width:400px;text-align: center;color:#ffffff; }

 .layout__main {background-color: #4DBCB0; padding:20px 0;}

    .layout__aside {background-color: #E35881;padding:20px 0; }

    .layout { display: flex;}

    .layout__main { flex:;}

    .layout__aside {width: 200px; }

    .layout > .layout__aside:not(:first-child),

    .layout > .layout__main:not(:first-child){ margin-left: 10px;}

CSS布局-圣杯布局的更多相关文章

  1. css3布局-圣杯布局

    圣杯布局he双飞翼布局都是解决两边固定款中间自适应的三栏布局 圣杯布局为了中间div内容不被别的内容覆盖,将中间div设置了左右的内边距后,将左右两个div用相对布局position: relativ ...

  2. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

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

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

  4. CSS经典布局-圣杯布局、双飞翼布局

    圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...

  5. 前端css：“圣杯布局”

    昨天面试前端,一面危险通过,面试官建议我看看“圣杯布局”,听起来很玄妙的名字,花了一晚上弄明白怎么回事,惊讶于前端工作的细节和技巧! 我先看几个基础,在后面要用到的: 1.CSS right/left ...

  6. CSS布局 — 圣杯布局与双飞翼布局

    圣杯布局 实现原理 html代码中,middle部分首先要放在container的最前部分,然后是left,right 将三者都设置 float:left, position:relative (因为 ...

  7. CSS 之 圣杯布局&双飞翼布局

    圣杯布局 和 双飞翼布局 是重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 遵循了以下要点: 两侧宽度固定,中间宽度自适应 中间部分在DOM结构上优先,以便先行 ...

  8. css的圣杯布局

    圣杯布局和双飞翼布局实现的效果是一样的. 代码解析: 1.四个section,container,main,left,right.其中那个container为父容器. 2.main,left,righ ...

  9. css布局 -双飞翼布局&圣杯布局

    一,双飞翼布局 左右两边固定,中间可以随着浏览器放大和缩小 <!DOCTYPE html> <html lang="en"> <head> &l ...

随机推荐

  1. Java中的50个关键字

    form:http://blog.csdn.net/luoweifu/article/details/6776240 Java中的50个关键字 关键字也称为保留字,是指java语言中规定了特定含义的标 ...

  2. Java中的ReentrantLock和synchronized两种锁机制的对比

    原文:http://www.ibm.com/developerworks/cn/java/j-jtp10264/index.html 多线程和并发性并不是什么新内容,但是 Java 语言设计中的创新之 ...

  3. obj-c编程15[Cocoa实例03]:MVC以及归档化示例

    前面的博文里介绍了归档和解档,这里我们把它实际应用到一个简单的代码中去,将它作为一个多文档应用程序的打开和保存的背后支持.另外这里介绍一下MVC思想,这个在任何语言里都会有,它是一种设计思想,主要可以 ...

  4. 恶补web之七:html DOM知识

    html DOM定义了访问和操作html文档的标准;dom是w3c的标准,dom定义了访问html和xml文档的标准: w3c文档对象模型(dom)是中立平台和语言的接口,它允许程序和脚本动态访问和更 ...

  5. MOOS学习笔记2——HelloWorld回调

    MOOS学习笔记2--HelloWorld回调 例程 #include "MOOS/libMOOS/Comms/MOOSAsyncCommClient.h" bool OnConn ...

  6. oracle 修改 字段名称

    暂时应该没有对应的方法,所以我用自己想好的方法去修改 /*修改原字段名name为name_tmp,是将想改名称的字段改为没用/临时的字段*/ Alter  table 表名 rename column ...

  7. c#调用野狗云 rest api

    野狗云就不多介绍了,这里主要是记录一下c#调用他们提供的rest api,把数据post到野狗云存储,直接上代码 static void Main(string[] args) { string st ...

  8. convert sorted list to binary search tree(将有序链表转成平衡二叉搜索树)

    Given a singly linked list where elements are sorted in ascending order, convert it to a height bala ...

  9. ubuntu导入公钥的方法

    导入公钥的办法: #方法1: gpg --keyserver subkeys.pgp.NET --recv 6E871C4A881574DEgpg --export --armor 6E871C4A8 ...

  10. printf("Hello 2018!");

    月考 has Boom! 要全心准备期末考试,到年前是不能再看Blog了 新年加油!!! 不要感冒 :joy: