圣杯布局和双飞翼布局实现的效果是一样的。

代码解析：

1.四个section，container，main,left,right。其中那个container为父容器。

2.main,left,right均左浮动。

3.main的宽度为100%。

4.设置left的margin:-100%。

5.设置rightd margin:-200px;

6.设置父容器的内边距padding:0px 200px 0px 200px。

7.设置left的positon:relative;left:-200px.

8.设置right的position:relative:right;right:-200px;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body {

            min-width: 700px;

        }

        #container {

            padding: 0px 200px 0px 200px;

        }

        #main {

            height: 200px;

            width: 100%;

            float: left;

            background-color: rebeccapurple;

            word-break: break-all;

        }

        #left {

            height: 200px;

            width: 200px;

            float: left;

            background-color: gold;

            margin-left: -100%;

            position: relative;

            left: -200px;

        }

        #right {

            height: 200px;

            width: 200px;

            float: left;

            background-color: firebrick;

            margin-left: -200px;

            position: relative;

            right: -200px;

        }

    </style>

</head>

<body>

    <section id="container">

        <section id="main">

            gfdgdfg gdfgfdg gfdgdfg gdfgfdggfdgdfg gdfgfdggfdgdfg gdfgfdg

        </section>

        <section id="left"></section>

        <section id="right"></section>

    </section>

</body>

</html>

　　

css的圣杯布局的更多相关文章

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

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

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

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

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

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

  4. CSS 圣杯布局 / 双飞翼布局的实现

    工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...

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

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

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

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

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

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

  8. CSS布局方案之圣杯布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

    1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...

随机推荐

  1. PPT之SmartArt功能

    在PPT中,我们经常看到这样的漂亮的组合图标: 他们是怎么做出来的呢?其实用ppt自带的SmartArt功能就能做出来了. Tips:SmartArt可以直接先选择组合图标再填文字,还可以写好了文字, ...

  2. 【codeforces 776A】A Serial Killer

    [题目链接]:http://codeforces.com/contest/776/problem/A [题意] 这个杀手每天会除掉一个人; 这个杀手每天都有两个目标; 给你它杀人的日志,以及这个人被杀 ...

  3. sql server中的TimeStamp时间戳与UniqueIdentifier数据类型

    TimeStamp SQL Server timestamp 数据类型与时间和日期无关.SQL Server timestamp 是二进制数字,它表明数据库中数据修改发生的相对顺序.实现 timest ...

  4. Method for performing cache coherency in a computer system

    In a computing system, cache coherency is performed by selecting one of a plurality of coherency pro ...

  5. POJ3280 Cheapest Palindrome 【DP】

    Cheapest Palindrome Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 6013   Accepted: 29 ...

  6. Numpy Usage Introduction

    Reference : http://my.oschina.net/u/175377/blog/74406 试验性的Numpy教程 原文来自Tentative NumPy Tutorial 目录 先决 ...

  7. js之美

    http://fxck.it/post/72326363595 大部分脚本语言里字面量都要快一些,因为解析[]比解析new Array()步骤少的多 关于Object可以用constructor注入的 ...

  8. C++一个简单的手柄类模板

    #ifndef HANDLE_H #define HANDLE_H #include "Animal.h" template <typename T> class Ha ...

  9. PBS 作业调度应用

    PBS(Portable Batch System),最初由 NASA 的 Ames 研究中心开发,主要为了提供一个能满足异构计算网络需要的软件包,用于灵活的批处理(Portable Batch Pr ...

  10. python 教程 第十四章、 地址薄作业

    第十四章. 地址薄作业 #A Byte of Python #!/usr/bin/env python import cPickle import os #define the contacts fi ...