圣杯布局

圣杯布局很完美（兼容所有浏览器，包括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. AndroidUI之绘图机制和原理 最完整的文章

    转载请标明出处:http://blog.csdn.net/sk719887916/article/details/39961171,作者:skay  导读: 熟悉javaGUI的朋友对java绘图必定 ...

  2. prototype.js 和json.js 冲突

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

  3. javascript函数式编程一例分析

    js像其他动态语言一样是可以写高阶函数的,所谓高阶函数是可以操作函数的函数.因为在js中函数是一个彻彻底底的对象,属于第一类公民,这提供了函数式编程的先决条件. 下面给出一个例子代码,出自一本js教程 ...

  4. WebService学习--(二)webservice相关介绍

    一.WebService是什么? 1. 基于Web的服务:服务器端整出一些资源让客户端应用访问(获取数据) 2. 一个跨语言.跨平台的规范(抽象) 3. 多个跨平台.跨语言的应用间通信整合的方案(实际 ...

  5. 查询linux机器的公网ip

    在linux终端提示符下,输入以下命令: curl members.3322.org/dyndns/getip 可以看到下图已经查询到公网IP地址了,就是这么简单

  6. WebService技术简介

    今天继续阅读<.Net 大局观>时看到一段关于WebService支持技术的论述,真是简明扼要: Web services的另一个重要应用是B2B整合,一般来说它也依赖Internet,将 ...

  7. python---内置模块

    时间模块 时间分为三种类型:时间戳,结构化时间,格式化时间 #时间模块,time import time #时间戳 x = time.time() time.gmtime() #将时间戳转换成UTC时 ...

  8. 竞品调研时发现的Android新设计特性

    先share两篇技术层面的文章: Android M新控件之FloatingActionButton,TextInputLayout,Snackbar,TabLayout的使用:http://blog ...

  9. SpringMVC配置多个数据源

    多数据源,说白了,就是多数据库. 想要实现多数据库查询,只需简单四步即可实现! 第一步: 配置 jdbc.properties: # MySQL #========================== ...

  10. 阿里服务器CentOS报错base ls command not found

    第一次linux中安装jdk时,踩过的坑. 1.vi command not found ,输入任何命令都无法实现 只要原因是因为环境变量的问题,编辑profile文件没有写正确,导致在命令行下 ls ...