圣杯布局

三行等高

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="docm.css">
</head>
<body>
    <div id="page">
      <div id="hd"></div>
         <div id="bd">
         <div class="main">1231111<p>我我我</p><p>我我我</p><p>我我我</p><p>我我我</p></div>
              <div class="sub">11222</div>
              <div class="extra">456</div>
         </div>
      <div id="ft"></div>
  </div>
</body>
</html>

css:（在.bd中设置内边距，然后在.sub和.extra中设置负边距把中间的内容显示出来）

*{
  margin: 0;
  padding: 0;
 }
 #hd{
  width: 100%;
  height: 100px;
  background-color: #FC3D83;
 }
.main {
           float: left;
           width: 100%;    //中间内容自适应
           background-color: #ccc;
           padding-bottom: 9999px;       //把内容撑出去后又收回来形成等高
           margin-bottom: -9999px;     //把内容撑出去后又收回来形成等高
 }
 .sub {
           float: left;
           width: 190px;
           margin-left: -100%;      //将内容设置到左边
           background-color: #ED1E25;
           padding-bottom: 9999px;
           margin-bottom: -9999px;
           position: relative;     //设置相对位置来配放，而双飞翼不设置
           left: -190px;      //在.bd中设置内边距，然后在.sub和.extra中设置负边距把中间的内容显示出来
            }
 .extra {
             float: left;
             width: 190px;
             margin-left: -190px;    //将内容设置到右边
             background-color: #f0f;
             padding-bottom: 9999px;
             margin-bottom: -9999px;
             position: relative;    //设置相对位置来配放，而双飞翼不设置
             right: -190px;      //在.bd中设置内边距，然后在.sub和.extra中设置负边距把中间的内容显示出来
 }
 #bd {
          padding: 0 190px 0 190px;    //在.bd中设置内边距，然后在.sub和.extra中设置负边距把中间的内容显示出来
          background-color: #ff0;
          overflow: hidden;     //超出内容隐藏，等高的设置
 }
 #ft{
  width: 100%;
  height: 100px;
  background-color: #5880F4;
 }

效果如图：

---------------------------------------------分割线看什么看-------------------------------------------------------------

双飞翼布局

上面的圣杯布局其实已经挺好的，但是因为用了相对定位，所以对于布局就不太稳定，那么如何不用相对定位来实现这个效果呢，于是就有了双飞翼布局，在mian主要内容中加一个盒子包裹，再用margin-left使内容显示出来。

三行等高

HTML:

<div id="page">
      <div id="hd"></div>
         <div id="bd">
              <div class="main"><div class="inside">1231111</div></div>
              <div class="sub">234<p>我我我<p/><p>我我我<p/><p>我我我<p/><p>我我我<p/></div>
              <div class="extra">456</div>
         </div>
      <div id="ft"></div>
  </div>

CSS：

*{
  margin: 0;
  padding: 0;
 }

#hd{
  width: 100%;
  height: 100px;
  background-color: #FC3D83;
 }
.main {
           float: left;
           width: 100%;        //自适应
           background-color: #ccc;
           padding-bottom: 9999px;       //把内容撑出去后又收回来形成等高
           margin-bottom: -9999px;     //把内容撑出去后又收回来形成等高
 }
 .sub {
           float: left;
           width: 190px;
           margin-left: -100%;
           background-color: #ED1E25;
           padding-bottom: 9999px;
           margin-bottom: -9999px;
            }
 .extra {
             float: left;
             width: 190px;
             margin-left: -190px;
             background-color: #f0f;
             padding-bottom: 9999px;
             margin-bottom: -9999px;
 }
 #bd {
          background-color: #ff0;
          overflow: hidden;     　　//超出的内容隐藏
 }
 .inside{
  margin: 0 190px;      //中间最里的盒子设置外边距把内容显示出来
 }

#ft{
  width: 100%;
  height: 200px;
  background-color: #5880F4;
 }

效果如图：

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

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

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

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

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

  3. css布局笔记（三）圣杯布局，双飞翼布局

    圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...

  4. CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...

  5. css两栏布局、圣杯布局、双飞翼布局

    最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...

  6. CSS布局之圣杯布局和双飞翼布局

    其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果都是一样的,差别在于其实现的思想. 一.圣杯布局 html代码中,将重要的内容 ...

  7. CSS圣杯布局、双飞翼布局详解

    三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...

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

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

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

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

  10. CSS_圣杯布局和双飞翼布局

    参考: 圣杯布局的来历是2006年发在a list part上的这篇文章: http://alistapart.com/article/holygrail 双飞翼布局介绍-始于淘宝UED: http: ...

随机推荐

  1. AngularJS事件绑定的使用详解

    本文和大家分享的主要是AngularJS中事件绑定相关知识点,希望通过本文的分享,对大家学习和使用AngularJS有所帮助. 1.绑定事件:表达式.事件方法名: 2.绑定点击事件实例:显示.隐藏页面 ...

  2. Caché数据库学习笔记（1）

    目录: Caché的概念和基础知识 Caché数据库的安装 创建命名空间(namespace)和数据库(database) Documentation的使用 ===================== ...

  3. 6/14 Sprint2 看板和燃尽图

    中间部分还需要改进 小组评分:(团队总分为80) 团队成员:        101丘娟同学:21        107杨晓霞同学:18        108周诗琦同学:22        124陈程同 ...

  4. mysql 处理查询请求过程

    需要搞清楚查询为什么会慢,就要搞清楚mysql处理查询请求的过程: 1.客户端发送SQL请求给服务器 2.服务器检查是否可以在查询缓存中命中该SQL   查询缓存对SQL性能的影响. 1.需要对缓存加 ...

  5. oracle给字段添加描述

    oracle中,我们有时候需要给表的字段添加描述.用以下语句即可. alter table a add b varchar2(2); comment on column a.b  is '这是表a的字 ...

  6. Django+python+BeautifulSoup垂直搜索爬虫

    http://blog.sina.com.cn/s/blog_709475a10100wmln.html

  7. 黑马程序员——OC语言 内存管理

    Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)计数器 每个对象内部都保存了一个与之相关联的整数,称为引用计数器,当 ...

  8. Javascript中封装window.open的例子

    对window.open进行封装, 使其更好用, 且更兼容, 很多人说window.open不兼容,其实不是, 因为不能直接执行, 必须通过用户手动触发才行;看代码: 代码如下 复制代码 var op ...

  9. Allegro建立引脚封装概念名词梳理

    首先感谢于博士的60讲的Cadence教学视频,老师讲的还是很有耐心,很细致,谢谢! 目前还只是看到建立PCB封装这一块,正好手头上有个案子在做,边做边学的进度还是要好很多.以前的工作对原理图这一块的 ...

  10. php大力力 [039节] 修改一下后台项目，同时启用印象笔记，要做的事情todo列表，记录在印象笔记，速度快一些

    php大力力 [039节]  修改一下后台项目,同时启用印象笔记,要做的事情todo列表,记录在印象笔记,速度快一些