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

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

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

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

1).绝对定位法

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

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>layout_box</title>

		<link rel="stylesheet" type="text/css" href="../css/layout_box.css">

	</head>

	<body>

		<h3>实现三列宽度自适应布局</h3>

		<div id = "left">我是左边</div>

		<div id = "right">我是右边</div>

		<div id = "center">我是中间</div>

	</body>

</html>

css代码：

html,body{ margin: 0px;width: 100%; }

h3{height: 100px;margin:20px 0 0;}

#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}

#left{left:0px;}

#right{right: 0px;}

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

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

2).使用自身浮动法

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

<div id = "left_self">我是左边</div>

<div id = "right_self">我是右边</div>

<div id = "center_self">我是中间</div>

css代码：

#left_self,#right_self{ width: 200px;height: 200px; background-color: #ffe6b8 }

#left_self {float: left;}

#right_self{float: right;}

#center_self{margin: 0 210px;height: 200px; background-color: #a0b3d6}

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

3). 圣杯布局

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

<h3>使用margin负值法进行布局</h3>

		<div id = "wrap">

			<div id = "center"></div>

		</div>

		<div id = "left_margin"></div>

		<div id = "right_margin"></div>

CSS代码：

#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}

#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }

#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }

#left_margin {margin-left: -100%; background-color: lightpink}

#right_margin{margin-left: -200px;}

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

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

2 ， css3新特性

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

代码：

<div id = "box">

		 <div id = "left_box"></div>

		 <div id = "center_box"></div>

		 <div id = "right_box"></div>

		</div>

css样式：

#box{width:100%;display: flex; height: 100px;margin: 10px;}

#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}

#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. python 读csv文件对列名进行合法性验证

    如果正在读取CSV 数据并将它们转换为命名元组,需要注意对列名进行合法性认证.例如,一个CSV 格式文件有一个包含非法标识符的列头行,这样最终会导致在创建一个命名元组时产生一个ValueError 异 ...

  2. SpringMVC中的自定义参数绑定案例

    由于日期数据有很多种格式,所以springmvc没办法把字符串转换成日期类型.所以需要自定义参数绑定.前端控制器接收到请求后,找到注解形式的处理器适配器,对RequestMapping标记的方法进行适 ...

  3. Linux基础命令---ifconfig

    ifconfig ifconfig指令用来配置网络接口参数,同时还可以显示当前内核网络接口的工作状态.如果没有提供参数,则ifconfig将显示当前活动接口的状态.如果给定单个接口参数,则只显示给定接 ...

  4. CentOS7使用yum命令安装Java1.8

    CentOS7使用yum命令安装Java1.8 首先更新已安装的包:#yum update查看系统当前的java版本:#java -version==================== CentOS ...

  5. centos 6.8操作系统安装arcgis server 10.4

    1.检查操作系统中软件包的安装,第一条和第二条是图形界面工具,可以不装. 可以用rpm -qa | grep 软件名   命令检查软件包是否已经安装 主机名不能包含下划线,可以用hostname检查主 ...

  6. Codeforce 287A - IQ Test （模拟）

    In the city of Ultima Thule job applicants are often offered an IQ test. The test is as follows: the ...

  7. Modbus库开发笔记之十一：关于Modbus协议栈开发的说明（转）

    源: Modbus库开发笔记之十一:关于Modbus协议栈开发的说明

  8. MySQL SELECT练习题*28

    -- (1)用子查询查询员工“张小娟”所做的订单信息. SELECT * FROM order_master WHERE saler_no = ( SELECT employee_no FROM em ...

  9. 【题解】Luogu P2522 [HAOI2011]Problem b

    原题传送门 这题需要运用莫比乌斯反演(懵逼钨丝繁衍) 我们看题面,让求对于区间\([a,b]\)内的整数x和\([c,d]\)内的y,满足$ gcd(x,y)=k$的数对的个数 我们珂以跟容斥原理(二 ...

  10. Java中断异常 InterruptedException 的正确处理方式

    你看到这篇文件可能是因为你已经调用了一个抛出 InterruptedException 异常的方法,并且需要以某种方式处理它. 首先,需要了解为一个方法为啥会 throws InterruptedEx ...