圣杯布局

圣杯布局很完美（兼容所有浏览器，包括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. OpenCV——PS 图层混合算法 （二）

    具体的算法原理可以参考 PS图层混合算法之二(线性加深,线性减淡,变亮,变暗) // PS_Algorithm.h #ifndef PS_ALGORITHM_H_INCLUDED #define PS ...

  2. c++ list 合并操作函数实例

    #include <list> #include <iostream> using namespace std; //list 链表的打印 void print(list< ...

  3. prototype.js 和json.js 冲突

    1.冲突简述和分析 prototype.js与json.js并不是完全兼容的.主要冲突在于json.js为Object的原型增加了一个toJSONString的方法. 冲突之一:是prototype中 ...

  4. apt-get Ubuntu本地ISO镜像入源

    转自http://blog.csdn.net/binchel/article/details/21486999 在没有网络的情况下,本地镜像源不实为一个上等的权宜之计! 目前linux的两大主流包管理 ...

  5. java学习日记-基础-列出2~100内的素数

    素数的概念:一个整数如果只能整除1和它本身,那么这个整数就是一个素数 方法一:素数是除去能被2整除.3整除.5整除.7整除的整数,但包含2,3,5,7 public class Sushu { pub ...

  6. Integer 和int 比较

    在jdk1.5的环境下,有如下4条语句: 1 2 3 4 Integer i01 = 59; int i02 = 59; Integer i03 =Integer.valueOf(59); Integ ...

  7. org.eclipse.swt.SWTException: Invalid thread access问题解决方法

    转自 http://blog.csdn.net/ecjtuxuan/article/details/2125023 怎么解决SWT多线程错误:Caused by: org.eclipse.swt.SW ...

  8. JavaScript数组中出现的次数最多的元素

    var arr = [1,-1,2,4,5,5,6,7,5,8,6]; var maxVal = arr[0]; // 数组中的最大值 var minVal = arr[0]; // 数组中的最小值 ...

  9. Lintcode395 Coins in a Line II solution 题解

    [题目描述] There are n coins with different value in a line. Two players take turns to take one or two c ...

  10. Android开发阅读文档资源

    Android Studio:工具:http://developer.android.com/intl/zh-cn/tools/studio/index.html培训教程:http://develop ...