圣杯布局he双飞翼布局都是解决两边固定款中间自适应的三栏布局

圣杯布局为了中间div内容不被别的内容覆盖，将中间div设置了左右的内边距后，将左右两个div用相对布局position: relative并给两侧的div添加right和left属性，以便左右两栏div移动后不内容不覆盖中间div。

圣杯布局的特点(两端固定中间自适应)，也就是说两端的内容不会因为浏览器宽度的改变使其内容改变

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <style>

        html,body{

            min-width: 500px;

        }

        #container{

            padding-left: 200px;

            padding-right: 150px;

            height: 200px;

        }

        #container .column{

            float: left;

        }

        #center{

            width: 100%;

            background: red;

        }

        #left{

            width: 200px;

            margin-left: -100%;

            position: relative;

            background: blue;

            left: -200px;

        }

        #right{

            width: 150px;

            margin-left: -150px;

            position: relative;

            right: -150px;

            background: orange;

        }

        #footer{

            clear: both;

        }

    </style>

    <body>

        <div id="header"></div>

        <div id="container">

            <div id="center" class="column">中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间</div>

            <div id="left" class="column">左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</div>

            <div id="right" class="column">右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</div>

        </div>

        <div id="footer"></div>

    </body>

</html>

通过这段代码的实现，可以发现随着浏览器的缩小，只有中间的文字内容会随之改变，两端则不会，这就是三栏布局中常见的圣杯布局。

圣杯布局：我个人的理解的是，两端的div可是看成是限制了杯子的大小，而中间的div可以看成是一定容量的水，当杯子缩小后，里面的水的容量是固定的，所以水位会随之增高或降低

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

  1. CSS布局-圣杯布局

    圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...

  2. CSS3之圣杯布局和双飞翼布局

    圣杯布局: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

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

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

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

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

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

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

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

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

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

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

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

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

  9. 固比固布局 圣杯布局 css实现传统手机app布局

    手机app的布局大致上都是头部.内容.底部三部分: 我们需要实现的是头部.底部高度固定:中间内容区域自适应且可以滚动:直接贴代码: css: html,body { width: 100%; heig ...

随机推荐

  1. [CF85E] Guard Towers - 二分+二分图

    题目描述 In a far away kingdom lives a very greedy king. To defend his land, he built n n n guard towers ...

  2. [HDU2294] Pendant - 矩阵加速递推

    Pendant Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  3. 关于a标签的href属性

    今天有人问起我a标签的href属性值为 # 与 JavaScript:void(0) 有啥区别,想来也没啥可说,就简单说两句 a标签的href属性,优点有: 天然鼠标手型,以及可以被键盘focus以及 ...

  4. 实践开发：vue框架重点知识分析

    一个VUE项目的主树: assets文件夹是放静态资源: components是放组件: router是定义路由相关的配置; view视图: app.vue是一个应用主组件: main.js是入口文件 ...

  5. spring boot 中的路径映射

    在spring boot中集成thymeleaf后,我们知道thymeleaf的默认的html的路径为classpath:/templates也就是resources/templates,那如何访问这 ...

  6. postgresql被注入之后

    本来只是贪便宜买了个一年特价的阿里云服务器,做做测试什么的,结果不知道哪一天开始阿里云安全中心就开始给我发什么安全提示类的信息,一开始我并不在意,因为这些都是套路,不过是想让我升级购买高防盾罢了,反正 ...

  7. 美团 iOS 端开源框架 Graver 在动态化上的探索与实践

    近些年,移动端动态化技术可谓是“百花齐放”,其中的渲染性能也是动态化技术一直在探索.研究的课题.美团的开源框架 Graver 也为解决动态化框架的渲染性能问题提供了一种新思路:关于布局,我们可以采用“ ...

  8. 选择器， ，>，+，~

    一.后代选择器 选取指定元素的后代元素 与子元素选择器相比,后代选择器选取的不一定是直接后代(儿子),而是作用于所有后代元素(儿子.孙子.重孙…)都可以. 二.(>)子元素选择器 选取某个元素的 ...

  9. 死磕 java线程系列之线程池深入解析——未来任务执行流程

    (手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本. 注:线程池源码部分如无特殊说明均指ThreadPoolExecutor类. 简介 前面我们一起学习了线程池中普 ...

  10. 一:XMind