来源：http://blog.csdn.net/cinderella_hou/article/details/52156333

所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。

1. 基于传统的position和margin等属性进行布局

   这里也分为三种方法，分别为绝对定位法，圣杯布局，自身浮动法。

1).绝对定位法

    绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。
   代码如下：
文档代码：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>layout_box</title>
  6. 		<link rel="stylesheet" type="text/css" href="../css/layout_box.css">
  7. 	</head>
  8. 	<body>
  9. 		<h3>实现三列宽度自适应布局</h3>
  10. 		<div id = "left">我是左边</div>
  11. 		<div id = "right">我是右边</div>
  12. 		<div id = "center">我是中间</div>
  13. 	</body>
  14. </html>

css代码：

  1. html,body{ margin: 0px;width: 100%; }
  2. h3{height: 100px;margin:20px 0 0;}
  3. #left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}
  4. #left{left:0px;}
  5. #right{right: 0px;}
  6. #center{margin:2px 210px ;background-color: #eee;height: 200px; }
   该法布局的好处，三个div顺序可以任意改变。不足是 因为绝对定位，所以如果页面上还有其他内容，top的值需要小心处理，最好能够对css样式进行一个初始化，就像在上面例子中加了一个标题，如果不对样式进行初始化，则两边和中间的值会对不齐。 另外，随着浏览器窗口缩小，小于200px的时候，会发生压缩。

结果如图，可以看到中间栏宽度随着屏幕大小伸缩。

2).使用自身浮动法

    自身浮动法的原理就是使用对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。
   HTML代码：
  1. <h3>使用自身浮动法定位</h3>
  2. <div id = "left_self">我是左边</div>
  3. <div id = "right_self">我是右边</div>
  4. <div id = "center_self">我是中间</div>

css代码：

  1. #left_self,#right_self{ width: 200px;height: 200px; background-color: #ffe6b8 }
  2. #left_self {float: left;}
  3. #right_self{float: right;}
  4. #center_self{margin: 0 210px;height: 200px; background-color: #a0b3d6}

该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center一定要放在最后，这是和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被击倒下一行。

3). 圣杯布局

   圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合，具体原理参考这里。这里对圣杯布局解释特别详细。
实现代码：HTML文档：

  1. <h3>使用margin负值法进行布局</h3>
  2. 		<div id = "wrap">
  3. 			<div id = "center"></div>
  4. 		</div>
  5. 		<div id = "left_margin"></div>
  6. 		<div id = "right_margin"></div>

CSS代码：

  1. #wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}
  2. #wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }
  3. #left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }
  4. #left_margin {margin-left: -100%; background-color: lightpink}
  5. #right_margin{margin-left: -200px;}

该方法在网站布局中非常常见，也是面试常考点，优点是三栏相互关联，有一定的抗性。需要注意的是，布局中间部分一定要放在前面，左右顺序不限制。对于left快的margin负值一定要等于wrap的宽度。

三种方法实现三栏网页宽度自适应布局方法见下图。

2 ， css3新特性

在外围包裹一层div，设置为display：flex；中间设置flex：1；但是盒模型默认紧紧挨着，可以使用margin控制外边距。

代码：

  1. <div id = "box">
  2. 		 <div id = "left_box"></div>
  3. 		 <div id = "center_box"></div>
  4. 		 <div id = "right_box"></div>
  5. 		</div>

css样式：

  1. #box{width:100%;display: flex; height: 100px;margin: 10px;}
  2. #left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}
  3. #center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}

注意： center一定要放到中间。

效果图如下：

css布局还有很多其他特性，下一步准备研究清楚浮动，再研究position、和display属性。

使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）的更多相关文章

  1. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

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

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

  3. css实现三栏水平布局双飞翼与圣杯布局

    作为布局的入门级选手,网上也查看了很多信息和资源 双飞翼的html结构 <div class="container"> <div class="main ...

  4. css 两边宽度固定中间自适应宽度

    #content_left{   //左 width:73px; height:100px; vertical-align:middle; margin-right:-100px; float:lef ...

  5. css之页面三列布局之左右两边宽度固定，中间自适应

    左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...

  6. CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

    1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...

  7. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

  8. CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  9. flex实现三栏等分布局

    前言 在实际开发中,我们经常会想要实现的一种布局方式就是三栏等分布局,那么我们如何来解决这个问题呢? 解决 方法一:flex 外层容器也就是ul设置display:flex,对项目也就是li设置fle ...

随机推荐

  1. 设计模式之Composite（组合）（转）

    Composite定义: 将对象以树形结构组织起来,以达成"部分-整体" 的层次结构,使得客户端对单个对象和组合对象的使用具有一致性. Composite比较容易理解,想到Comp ...

  2. pip使用简要说明

    一.pip常用命令 安装指定包 pip install SomePackage #最新版本 安装指定包 pip install SomePackage==1.0.4 #指定版本 安装指定包 pip i ...

  3. 教你如何修改CentOS系统上的时间

    直接看命令:

  4. [转载]decode()函数简介

    今天看别人的SQL时看这里面还有decode()函数,以前从来没接触到,上网查了一下,还挺好用的一个函数,写下来希望对朋友们有帮助哈! decode()函数简介: 主要作用:将查询结果翻译成其他值(即 ...

  5. Caddy – 方便够用的 HTTPS server 新手教程

    最近发现了一个 golang 开发的 HTTP server,叫做 Caddy,它配置起来十分简便,甚至可以 28 秒配置好一个支持 http2 的 server ,而且对各种 http 新特性都支持 ...

  6. Torch或Numpy

    1.什么是NumpyNumpy系统是Python的一种开源的数值计算扩展,用python实现的科学计算包.这种工具可用来存储和处理大型矩阵,包括强大的N维数组对象Array,比较成熟的函数库等.num ...

  7. Sort aborted Error in MySQL Error Log

    现象 [ERROR] lines containing "Sort aborted" are present in the MySQL error log file. [Warni ...

  8. python简说（四）字符串

    s='.abc.abc.BCD,abc'# new_s = s.strip('.') #默认去掉字符串两边的空格和换行符# print(s.rstrip()) #去掉右边的# print(s.lstr ...

  9. [c/c++] programming之路（1）、编写程序打开记事本、计算器等

    一.命令行启动程序 通过命令行关闭程序:taskkill /f /im 程序名.exe 二.打开记事本.计算器 #include <stdlib.h> void main(){ syste ...

  10. tp5 本地安装和调试的问题

    安装的时候用官方下载的包或者用composer指定版本号,不要用git,会安装最新的包. 本地配置域名的时候出错,要不就是500要不就是找不到文件,原因是目录路径里的反斜杆加字母t被转义了,改成正斜杠 ...