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

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. flex盒子布局

    看过很多对于弹性盒子flex的简介,但还是觉得阮一峰大神的解析和张鑫旭大神(旧版flex)的解析比较容易理解,下面,我以自己的理解来叙述关于flex弹性布局! 1.概念(容器和项目) 在flex中,有 ...

  2. PostGIS 结合Openlayers以及Geoserver实现最短路径分析（三）

    接上篇,前面在ArcMap中和Postgis中将数据都已经进行了预处理. 接下来回到Geoserver中,进行数据发布. 1.新建工作区 2.填写完工作区信息 3.打开数据存储,添加新的数据存储 4. ...

  3. LLDB调试详解--逆向开发

    前言 今天讲述在苹果日常开发中一个装逼神器LLDB,是Xcode内置的动态调试工具. 在iOS系统程序开发中,会经常需要代码调试的追踪, 最常用的也是LLDB(low level debugger) ...

  4. Jenkins 实现前端自动打包,自动部署代码及邮件提醒功能

    在之前的公司,我们前端使用webpack构建项目,项目构建完成后,我们会使用ftp或linux的一些命令工具上传我们的文件到服务器上,这种方式虽然是可以,但是最近面试的时候,人家会问我前端如何部署项目 ...

  5. linux basic

    一:date 语法: 打印日期:date [OPTION].....  [+FORMAT] 设定日期:date [MMDDhhmm] [[cc][YY][.ss] 创建带实时日期的文件 touch $ ...

  6. DVWA学习之SQL注入

    DVWA学习之SQL注入 环境工具 dvwa 1.9 phpstudy firefox burpsuite 实验步骤 一.设置安全级别为LOW 1. 登录DVWA,并将安全级别设置为LOW 2. 进入 ...

  7. 运维与开发的开车现场之MySQL5.7创建触发器报错解决过程

    报错内容如下: ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds ...

  8. Machine Learning In Action 第二章学习笔记: kNN算法

    本文主要记录<Machine Learning In Action>中第二章的内容.书中以两个具体实例来介绍kNN(k nearest neighbors),分别是: 约会对象预测 手写数 ...

  9. C# partial 关键字分析

    简单的来说 partial是局部类型的意思 就是说有这个关键字的类.结构或接口可以写成几个部分 比如 public partial class Program { static void Main(s ...

  10. RestSharp Simple REST and HTTP API Client for .NET

    var client = new RestClient("http://example.com"); // client.Authenticator = new HttpBasic ...