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

1.两侧宽度固定，中间宽度自适应

2.中间部分在DOM结构上优先，以便先行渲染

3.允许三列中的任意一列成为最高列

4.只需要使用一个额外的<div>标签

圣杯布局

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>圣杯布局</title>

		<style type="text/css">

			.header{

			    height:50px;

			    background: #666;

			    text-align: center;

			}

			.main{

			    /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/

			    padding:0 200px 0 180px;

			    height:100px;

			}

			.middle{

			    float:left;

			    width:100%;/*左栏上去到第一行*/

			    height:100px;

			    background:blue;

			}

			.left{

			    float:left;

			    width:180px;

			    height:100px;

			    margin-left:-100%;

			    background:#0c9;

			    /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/

			    position:relative;

			    left:-180px;

			}

			.right{

			    float:left;

			    width:200px;

			    height:100px;

			    margin-left:-200px;

			    background:#0c9;

			    /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/

			    position:relative;

			    right:-200px;

			}

			.footer{

			    height:50px;

			    background: #666;

			    text-align: center;

			}

		</style>

	</head>

	<body>

	<div class="header">header</div>

	<div class="main">

	  <div class="middle">middle</div>

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

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

	</div>

	<div class="footer">footer</div>

	</body>

</html>

双飞翼布局

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

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

		<style type="text/css">

			.header {

				height: 100px;

				background: bisque;

			}

			.left {

				width: 200px;

				height: 300px;

				background: coral;

				float: left;

				margin-left: -100%;

				margin-right: -200px;

			}

			.center {

				background: palegreen;

				float: left;

				width: 100%;

			}

			.inside{

				margin-left: 200px;

				margin-right: 180px;

			}

			.right {

				width: 180px;

				height: 200px;

				background: darkorange;

				float: left;

				margin-left: -180px;

			}

			.footer {

				height: 200px;

				background: salmon;

				clear: both;

			}

		</style>

	</head>

	<body>

		<div class="header">header</div>

		<div class="main">

			<div class="center">

				<div class="inside">

					中间自适应区域

				</div>

			</div>

			<div class="left">左边固定区域</div>

			<div class="right">右边固定区域</div>

		</div>

		<div class="footer">footer</div>

	</body>

</html>

CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局的更多相关文章

  1. css高度已知，左右定宽，中间自适应三栏布局

    css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. css中常用的七种三栏布局技巧总结

    三栏布局,顾名思义就是两边固定,中间自适应.三栏布局在开发十分常见,那么什么是三栏布局?例如当当网首页边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应.效果如下图所示: 下面围绕的这样的 ...

  3. 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？

    在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...

  4. CSS布局——三栏布局

    说到三栏布局,很多都会提到圣杯布局和双飞翼布局这两个经典的三栏布局方式.于是,我在网上搜了一些相关资料,阅读并跟着代码敲了一遍,发现在处理三栏布局上,他们采用的都是两边栏固定,中间栏自适应的策略.在处 ...

  5. 三栏布局只知道圣杯、双飞翼，最终评级是……F

    三栏布局,面试与工作中的常见布局.分左中右三部分,其中左右宽度已知,中间宽度自适应.根据不同的DOM顺序与CSS处理,这里写下了五类布局方式. 一.浮动布局 1 圣杯布局 L:"我问你,你就 ...

  6. 三栏布局的三个典型方法（圣杯、双飞翼、flex）

    聊聊三栏布局----左右定宽,中间自适应. 效果图: 圣杯布局 <!DOCTYPE html> <html> <head lang="en"> ...

  7. css-前端实现左中右三栏布局的常用方法:绝对定位，圣杯，双飞翼，flex，table-cell,网格布局等

    1.前言 作为一个前端开发人员,工作学习中经常会遇到快速构建网页布局的情况,这篇我整理了一下我知道的一些方法.我也是第一次总结,包括圣杯布局,双飞翼布局,table-cell布局都是第一次听说,可能会 ...

  8. 记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。

    前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...

  9. Css三栏布局自适应实现几种方法

    Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...

随机推荐

  1. 三维目标检测论文阅读：Deep Continuous Fusion for Multi-Sensor 3D Object Detection

    题目:Deep Continuous Fusion for Multi-Sensor 3D Object Detection 来自:Uber: Ming Liang Note: 没有代码,主要看思想吧 ...

  2. 结合开源软件kaptcha讲解登录验证码功能的实现

    一.验证码生成之配置使用kaptcha 使用google开源的验证码实现类库kaptcha,通过maven坐标引入 <dependency> <groupId>com.gith ...

  3. Lua和C交互的简易教程

    转载请标明出处:http://blog.csdn.net/shensky711/article/details/52458051 本文出自: [HansChen的博客] Lua栈 要理解Lua和C++ ...

  4. 当linux突然修改任何设置都没办法联网时的绝对有效解决办法

    以下操作为重新启动虚拟网卡的相关配置,初始化并重启虚拟网卡,对目前的配置不会有任何影响 打开终端,依次输入以下内容:– sudo service network-manager stop– sudo  ...

  5. Linux发展史及安装

    操作系统 什么是操作系统 人与硬件的中介/桥梁 操作系统的组成  操作系统可以理解为一个鸡蛋 蛋黄    内核                   Linux内核  托瓦斯  鸡蛋清  命令解释器(s ...

  6. PHP通用分页类

    Page.class.php <?php/** * 分页类 * * 调用方式: * $p=new Page(总条数,显示页数,当前页码,每页显示条数,[链接]); * print_r($p-&g ...

  7. c# 窗体开发3 文件处理技术

    以字节形式向磁盘写入数据通常称为字节流(比特流) 常常使用System.Io 常用的类 类 说明 File 提供用于创建.复制.删除.移动和打开文件的静态方法,并协助创建 FileStream 对象. ...

  8. Spring Cloud第二篇 | 使用并认识Eureka注册中心

    ​ 本文是Spring Cloud专栏的第二篇文章,了解前一篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 ​​ 一.Sprin ...

  9. Solr搜索引擎【索引管理】

    一.索引存储 当文档提交到索引之后,directory目录组件会将它们写入到持久化存储器.Solr的目录组件具有以下重要特点: 1.隐藏持久存储的读写细节,例如,将文档写入到磁盘或通过JDBC在数据库 ...

  10. ruby2.2 DevKit 安装后无法使用解决方案

    windows 系统下,Ruby 的某些 gem 包需要 DevKit 才能正常安装,2.4 以后的版本可以一键安装 DevKit,之前的版本只能手动安装. 2.4 以后的可以到官网下载:https: ...