所谓圣杯布局，就是自适应浏览器的分辨率，也称双飞翼布局。

例子：

 <style>

 body{margin:0;}

 .center{height:600px;background:#f60;margin:0 200px;}

 .left{width:200px;background:#fc0;height:600px; position:absolute;left:0;top:0;}

 .right{width:200px;background:#fcc;height:600px;position:absolute;right:0;top:0;}

 </style>

 </head>

 <body>

 <div class="center">2</div>

 <div class="left">1</div>

 <div class="right">3</div>

等高布局：

例子：

 style>

 body{margin:0;}

 .wrap{ width:900px;margin:0 auto; border:10px solid #000; overflow:hidden;}

 .wrap:after{content:"";display:block;clear:both;}

 .left{width:200px;background:Red;float:left; padding-bottom:1000px; margin-bottom:-1000px;}

 .right{width:200px;background:blue;float:right;padding-bottom:1000px;margin-bottom:-1000px;}

 </style>

 </head>

 <body>

 <div class="wrap">

     <div class="left">

         &nbsp;页面内容<br/>

         &nbsp;页面内容<br/>

         &nbsp;页面内容<br/>

         &nbsp;页面内容<br/>

         &nbsp;页面内容<br/>

     </div>

     <div class="right">

     </div>

 </div>

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

  1. css两列等高布局

    布局方案 等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法.首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个 ...

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

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

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

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

  4. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

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

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

  6. css设置多列等高布局

    初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...

  7. 如何用css实现"等高布局"。

    有时候为了让网页实现美观,在不知道高度的情况下,我们要用css实现等高布局效果,传统的方法, 我们可以用javascript实现,但是由于需求决定或者其他的情况下,我们只能用css实现,其方法主要是采 ...

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

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

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

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

随机推荐

  1. c++中的原子操作

    1. c/c++标准中没有定义任何操作符为原子的,操作符是否原子和平台及编译器版本有关 2. GCC提供了一组内建的原子操作,这些操作是以函数的形式提供的,这些函数不需要引用任何头文件 2.1 对变量 ...

  2. C#调用脚本语言（三）-- IronJS 与 IronLua 简单方法性能比较

    1.   测试环境 1.1. 硬件环境 CPU:intel Core i7-740QM 内存:8GDDR3 Memory 1.2. 系统 系统:Windows 8 Enterprise 开发工具:Vs ...

  3. Android核心分析 之十Android GWES之基本原理篇

    Android GWES基本框架篇 我这里的GWES这个术语实际上从Microsoft 的Window上移植过来的,用GWES来表示Android的窗口事件系统不是那么准确,在Android中Wind ...

  4. RabbitMQ安装与搭建

    1.下载Erlang,最新版本是erl8.1 ,地址:http://erlang.org/download/otp_win64_19.1.exe 网上很多资料说安装后要配置环境变量,不过我安装最新的版 ...

  5. Centos环境下部署游戏服务器－SVN

    版本控制工具的文章已经被写滥了,所以本篇文章不想介绍如何安装Svn如何可视化操作这些东西.本篇文章讲述我自己对Svn的理解,以及在命令行下操作.为啥不应可视化界面?有两方面的原因,远程登录到服务器都是 ...

  6. 【重走Android之路】【番外篇】关于==和equals

    [重走Android之路][番外篇]关于==和equals   在实际的编程当中,经常会使用==和equals来判断变量是否相同.但是这两种比较方式也常常让人搞得云里雾里摸不着头脑.下面是我个人做的总 ...

  7. 【重走Android之路】【Java面向对象基础（一）】数据类型与运算符

    [重走Android之路][基础篇(一)][Java面向对象基础]数据类型与运算符   1.数据类型介绍 在Java中,数据类型分为两种:基本数据类型和引用类型. 基本数据类型共8种,见下表: 基本数 ...

  8. BackgroundWorker组件学习

    今天看到别人的博客中提到了BackgroundWorker组件.在现在的系统中有见到过这个组件,由于实际应用的系统中逻辑比较复杂所以也没深入去看.今天凑巧看到了一个关于BackgroundWorker ...

  9. Linux系统安装MySQL步骤及支持远程操作配置方法

    一.数据库安装(安装在/usr/local目录) 1. 压缩包拷贝到/users/lengyufang/tools 2. groupadd mysql3. useradd -r -g mysql -s ...

  10. Matlab多个Figure图合成一个Fig

    案例:之前跑过的程序 已经生成了多个matlab图,现在需要进行合并到一个图中. 解决方案,利用图像句柄把figure图像中的参数读入到内存中,然后重新subplot绘制. 程序如下: clc;cle ...