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

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. Few-shot Object Detection via Feature Reweighting (ICCV2019)

    论文:https://arxiv.org/abs/1812.01866 代码:https://github.com/bingykang/Fewshot_Detection 1.研究背景 深度卷积神经网 ...

  2. 如何搭建Docker私有仓库

    私有仓库 有时候使用 Docker Hub 这样的公共仓库可能不方便,用户可以创建一个本地仓库供私人使用. 本节介绍如何使用本地仓库. docker-registry 是官方提供的工具,可以用于构建私 ...

  3. Vue之组件及组件通信

    组件之全局组件 //注意:需要在Vue实例化之前注册全局组件,使用Vue.component("组件名",{ template:`组件模板` }) Vue.component(&q ...

  4. 记一次MySQL数据库导入错误

    昨天在转数据的时候,控制台报出了下面这个warning: Warning: Data truncated for column '控制距离' at row 1 字面上意思应该是:控制距离这一字段在第一 ...

  5. 【Android - 进阶】之RemoteViews简介

    RemoteViews,顾名思义,就是远程的View,也就是可以运行在其他进程中的View.RemoteViews常用在通知和桌面小组件中. 一.RemoteViews应用到通知 首先来介绍一下系统自 ...

  6. Centos 7.x 内核升级

    作者信息 邮箱:sijiayong000@163.com Q Q:601566386 Centos 7.x 内核升级 注意:这篇文章只在 CentOS 7.× 系列版本上验证过,其他 CentOS 版 ...

  7. ASI和AFN的区别

    ASI总结 发送请求的2个对象 1.发送GET请求 ASIHttpRequest 2.发送POST请求 ASIFormDataRequest 二发送请求 1.同步请求 startSynchronous ...

  8. @PathVariable 处理参数为空的情况

    @RequestMapping(value = "/get/{id}/{userId}", method = RequestMethod.GET) public Result ge ...

  9. C#语法--委托，架构的血液

    委托的定义 什么是委托? 委托实际上是一种类型,是一种引用类型. 微软用delegate关键字来声明委托,delegate与int,string,double等关键字一样.都是声明用的. 下面先看下声 ...

  10. KETTLE多表关联的同步一张表的两种实现方式

    以下操作都在5.0.1版本下进行开发,其余版本可以进行自动比对 在平时工作当中,会遇到这种情况,而且很常见.比如:读取对方的多个视图或者表,写入目标库的一张表中,就涉及到多表的同步. 多表同步可以有以 ...