圣杯布局

实现原理

html代码中，middle部分首先要放在container的最前部分，然后是left，right

  1. 将三者都设置 float:left, position:relative (因为相对定位后面会用到）

  2. middle设置 width:100% 占满一行

  3. 此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 margin-left:-100%

  4. 这时left拉回到middle所在行的最左边，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上 padding:0 210px

  5. middle内容拉出来了，但left也跟着出来了，所以要还原，就对left使用相对定位 left:-210px

  6. 同理，right要拉到middle所在行的最右边，使用 margin-left:-210px，right:-210px

实现代码

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>圣杯布局</title>

    <style type="text/css">

        body {

            text-align: center;;

        }

        #demo {

            margin: auto;

        }

        #header, #footer {

            height: 50px;

            background-color: #aaa;

        }

        #container {

            overflow: hidden;

            margin: 10px 0;

            padding:0 210px;

        }

        #left {

            background-color: red;

            float:left;

            position:relative;

            left:-210px;

            width:200px;

            margin-left:-100%;

        }

        #right {

            background-color: green;

            width: 200px;

            margin-left: -200px;

            float: left;

            right: -210px;

            position: relative;

        }

        #middle {

            background-color: blue;

            float:left;

            width:100%;

        }

    </style>

</head>

<body>

    <div id="demo">

        <header id="header">头部</header>

        <div id="container">

            <div id="middle">

                middle<br>主内容区域

            </div>

            <div id="left">

                left<br>左侧边栏区域

            </div>

            <div id="right">

                right<br>右侧边栏区域

            </div>

        </div>

        <footer id="footer">底部</footer>

    </div>

</body>

</html>

双飞翼布局

实现原理

html代码中，middle部分首先要放在container的最前部分，然后是left，right

  1. 将三者都设置 float:left

  2. middle设置 width:100% 占满一行

  3. 此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 margin-left:-100%，同理right使用 margin-left:-200px

  4. 此时middle的内容被覆盖，要把middle的内容拉出来，除了使用外围container的padding，还可以考虑使用margin，给middle增加一个内层div -- middle_content, 然后设置 margin:0 210px

实现代码

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>双飞翼布局</title>

    <style type="text/css">

        body {

            text-align: center;;

        }

        #header, #footer {

            height: 50px;

            background-color: #aaa;

        }

        #container {

            overflow: hidden;

            margin: 10px 0;

        }

        #left {

            background-color: red;

            float:left;

            width:200px;

            margin-left: -100%;

        }

        #right {

            background-color: green;

            width: 200px;

            float: left;

            margin-left: -200px;

        }

        #middle {

            float: left;

            width: 100%;

        }

        #middle_content {

            background-color: blue;

            margin: 0 210px;

        }

    </style>

</head>

<body>

    <div id="demo">

        <header id="header">头部</header>

        <div id="container">

            <div id="middle">

                <div id="middle_content">

                    middle_content<br>主内容区域

                </div>

            </div>

            <div id="left">

                left<br>左侧边栏区域

            </div>

            <div id="right">

                right<br>右侧边栏区域

            </div>

        </div>

        <footer id="footer">底部</footer>

    </div>

</body>

</html>

CSS布局 — 圣杯布局与双飞翼布局的更多相关文章

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

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

  2. css中的圣杯布局和双飞翼布局

    圣杯布局 布局要求: 三列布局,中间自适应,两边定宽 中间栏要在浏览器优先渲染 允许任意列的高度最高 用最简单的CSS.最少的HACK语句 解释说明: 1.min-width:700px是为了当页面缩 ...

  3. 双飞翼布局介绍-始于淘宝UED

    仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术 ...

  4. 双飞翼布局介绍-始于淘宝UED-2011年淘宝玉伯写的

    仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术 ...

  5. HTML特殊布局--------双飞翼布局

    今天看到以前写的一篇布局的例子分享给大家,双飞翼布局. 什么是双飞翼布局?? 1.三列布局,中间宽度自适应,两边固定宽度; 2.中间栏在浏览器中优先展示渲染: 双飞翼布局的原理: 中间的盒子定100% ...

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

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

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

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

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

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

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

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

  10. css布局记录之双飞翼布局、圣杯布局

    双飞翼布局和圣杯布局是比较常用的布局方式,都是为了实现一行三列,并且两侧列固定宽度,中间列宽度自适应的效果:直接上代码记录下: <!DOCTYPE html> <html lang= ...

随机推荐

  1. Git-从远程仓库克隆

    本人拜读了廖雪峰老师关于Git的讲述后整理所得 上次我们讲了先有本地库,后有远程库的时候,如何关联远程库. 现在,假设我们从零开发,那么最好的方式是先创建远程库,然后,从远程库克隆. 首先,登陆Git ...

  2. RabbitMQ 如何实现对同一个应用的多个节点进行广播

    1.背景 了解过RabbitMQ的Fanout模式,应该知道它原本的Fanout模式就是用来做广播的.但是它的广播有一点区别,来回顾下它的含义:Fanout类型没有路由键的概念,只要队列绑定到了改ex ...

  3. Shape-in​​side css新属性 几何图形的实现

    https://www.w3cplus.com/css3/css-shapes-101.html

  4. netty10---分包粘包

    客户端:根据 长度+数据 方式发送 package com.server; import java.net.Socket; import java.nio.ByteBuffer; public cla ...

  5. Python 实例2—购物车

    老男孩教学学习笔记 """启动程序后,让用户输入工资,然后打印商品列表允许用户根据商品编号购买商品用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒可随机退出,退出 ...

  6. vmware基于主机模式实现上网（win10）

    首先查看本机win10的网络情况: 网卡VMnet1就是主机模式的网卡,确认本机win10共享了网络给vmnet1这张网卡,如果没有共享,那么进行设置: 进行上述设置,然后在vmnet1网卡上设置ip ...

  7. RocEDU.阅读.写作《苏菲的世界》书摘（三）

    根据柏拉图的说法,人是一种具有双重性质的生物.我们的身体是"流动"的,与感官的世界不可分割,并且其命运与世界上其他每一件事物(如肥皂泡)都相同.我们所有的感官都是以身体为基础,因此 ...

  8. 20145109 实验四 Andoid开发基础

    安装Android 打开 默认程序中有helloworld 按下下图红框中的键: 遇到问题: 方法:修改build.gradle

  9. Ubuntu16.04安装搜狗拼音输入法（中文输入法）[转]

    本文转载自:https://www.cnblogs.com/darklights/p/7722861.html 虽然网上有很多教程,但是我觉得我的很适合那些真正的小白... 1.下载文件 由于我要给多 ...

  10. TortoiseSVN忽略文件夹

    因为平时要做一些主干.分支的版本控制,发布增量补丁包工作,所以经常使用TortoiseSVN客户端.当然,eclipse中也安装了SVN插件,不过在打补丁方面感觉不如客户端.现在遇到了一个问题:同一项 ...