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

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. Composer依赖管理 – PHP的利器

    别再到处搜PHP类扩展包了,对于现代语言而言,包管理器基本上是标配.Java 有 Maven,Python 有 pip,Ruby 有 gem,Nodejs 有 npm.PHP 的则是 PEAR,不过 ...

  2. Reverse proxy

    Nginx 反向代理配置: upstream dynamic { zone upstream_dynamic 64k; least_conn; ##适用于long connect,即请求处理时间长 # ...

  3. 洛谷P1426-小鱼会有危险吗

    原题链接: https://www.luogu.org/problem/P1426 题面简述: 有一次,小鱼要从A处沿直线往右边游,小鱼第一秒可以游7米,从第二秒开始每秒游的距离只有前一秒的98%98 ...

  4. moco框架应用一步到位

    1.  Moco部署 5.1         运行环境 ü   Java运行环境 ü   moco-runner-0.11.0-standalone.jar jar包: Windows Java环境配 ...

  5. 使用centos7安装PXE教程

    PXE是一种电脑无盘(即没有硬盘)技术. 预启动执行环境(PXE)指的是那些使得IBM兼容计算机(经常是运行Windows系统)不需要硬盘或是启动软盘就能启动的方法. 通俗点讲就是配置好PXE以后可以 ...

  6. 2. Python环境安装

    Centos 下环境安装 我们通过pyenv来管理python环境,更好的帮助开发者避免在环境上出现各种各样的问题 准备工作 安装之前,确保已经安装了git yum install git -y 安装 ...

  7. 使用 colgroup 和 col 实现响应式表格

    Table 在项目使用中十分频繁,特别是在后台管理系统中,table 无疑是数据展示的第一公民,在早些年的网页中,table 也是网页布局的第一选择,然后使用好 table 并不容易,其它有很多子元素 ...

  8. desc和show

    desc只能查看表结构 查看zx1表结构 desc zx1; mysql> desc zx1 -> ; +---------+---------+------+-----+-------- ...

  9. 压缩打包介绍、gzip、bzip2、xz压缩工具

    第5周第1次课(4月16日) 课程内容: 6.1 压缩打包介绍6.2 gzip压缩工具6.3 bzip2压缩工具6.4 xz压缩工具 6.1 压缩打包介绍 为什么要给文件进行压缩呢?首先压缩和不压缩空 ...

  10. python_排序

    快速排序 基本思想是:从一个数组中随机选出一个数N,通过一趟排序将数组分割成三个部分,1.小于N的区域 2.等于N的区域 3.大于N的区域,然后再按照此方法对小于区的和大于区分别递归进行,从而达到整个 ...