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

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. sign in with apple后端校验（java）

    最近新开发的ios平台的app在提审的时候,被拒了,原因是app上如果有接第三方登陆(比如,微信,微博,facebook等),那就必须要接apple id登陆,坑爹~苹果霸权啊!然而没办法,靠他吃饭, ...

  2. System.out.printf使用以及注意点

    一.System.out.printf格式化输出 1.常用控制符 控制符 说明 %d 按十进制整型数据的实际长度输出. %ld 输出长整型数据. %md m 为指定的输出字段的宽度.如果数据的位数小于 ...

  3. 【Android - 自定义View】之不同事件的处理

    在Android的自定义View中,往往需要处理一系列的事件,如触摸事件.双击事件.缩放事件等.本文将这些事件及其处理进行总结.本文将持续更新,将我在自定义View的实践中用到的事件及其处理进行总结. ...

  4. MySQL事务和隔离级别

    Mysql事务 避免事务,会占用内存 事务是啥? 简而言之:事务 - 就是保护多条执行的sql语句,要么全部成功,要么全部失败 比如:转账就是一个事务:从一个用户将资金转出,再将资金转入到另一个用户, ...

  5. Matlab交叉验证函数——crossvalind

    Generate cross-validation indices  生成交叉验证索引 Syntax语法 Indices = crossvalind('Kfold', N, K) %K折交叉验证   ...

  6. 2019-2020-1 20199304《Linux内核原理与分析》第三周作业

    1.操作系统是如何工作的? 计算机三个法宝(3个关键性的方法机制): 存储程序计算机.函数调用堆栈.中断机制. 1.1堆栈: 在计算机领域,堆栈是一个不容忽视的概念,堆栈是一种数据结构.堆栈都是一种数 ...

  7. 纯CSS背景噪声.html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 一个普通程序员眼中的AQS

    AQS是JUC包中许多类的实现根基,这篇文章只是个人理解的产物,不免有误,若阅读过程中有发现不对的,希望帮忙指出[赞]! 1 AQS内脏图 ​  在开始了解AQS之前,我们先从上帝视角看看AQS是由几 ...

  9. 配置基于全局地址池的DHCP

    配置基于全局地址池的DHCP 配置基于全局地址池的DHCP服务器,从所有接口上的用户都可以选择该地址池中的地址,是个公共地址池. 实验 1.拓扑图 2.实验步骤 基本配置 开启DHCP功能 创建一个全 ...

  10. 16.Django学习之文件上传和下载

    上传就这么六步! 一. settings配置文件中配置 MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'medias').repl ...