圣杯布局

圣杯布局很完美（兼容所有浏览器，包括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. Android开发技巧——自定义控件之组合控件

    Android开发技巧--自定义控件之组合控件 我准备在接下来一段时间,写一系列有关Android自定义控件的博客,包括如何进行各种自定义,并分享一下我所知道的其中的技巧,注意点等. 还是那句老话,尽 ...

  2. Oracle 中Return 和exit的区别

    在Oracle存储过程中,使用Return 时,如果执行到Return语句,会跳出整个语句(如果是循环,会跳出整个循环),将不再执行,也就是结束了整个存储过程. 下面就用一个例子来说明一下 ,这个存储 ...

  3. 和菜鸟一起学linux之dlna的学习记录

    关于DLNA框架 1.Networking & Connectivity 为了解决物理设备连通问题, 主要依赖于Ethernet,802.11,Ipv4协议栈,Ipv6协议栈. TCP/IP协 ...

  4. ios项目开发汇总

    UI界面 iOS和Android 界面设计尺寸规范  http://www.alibuybuy.com/posts/85486.html iPhone app界面设计尺寸规范  http://www. ...

  5. jfinal的回滚

    有两种方法 1. @Before(Tx.class) public void test() throws Exception { } 优点:简单,不需要去处理每个异常,直接抛出异常: 缺点:不能详细的 ...

  6. 1-bit and 2-bit Characters

    We have two special characters. The first character can be represented by one bit 0. The second char ...

  7. 并发编程（五）：CAS

    在atomic包中,大多数类都是借助unsafe类来实现的,如以下代码 public static AtomicInteger count = new AtomicInteger(0); privat ...

  8. 2017年最适用于WIFI HACK的无线网卡推荐

    http://www.freebuf.com/articles/wireless/140065.html 相信很多初次使用Kali Linux来进行无线渗透的小伙伴都曾遇到过一个非常头疼的问题,就是不 ...

  9. Ubuntu设置代理的方法

    用过Linux的都知道,众多的PROXY配置,让人应接不暇,本文列出常见的一些PROXY的配置 1.apt-get proxy 的配置sudo gedit /etc/apt/apt.conf NOTE ...

  10. 详解Java的Spring框架中的注解的用法

    转载:http://www.jb51.net/article/75460.htm 1. 使用Spring注解来注入属性 1.1. 使用注解以前我们是怎样注入属性的 类的实现: class UserMa ...