来源：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. ftp下载文件失败get: Access failed: 550 Failed to open file. (t1.log)

    get: Access failed: 550 Failed to open file. (t1.log) 原因是被SELinux安全访问控制策略限制了. 科普: SELinux(Security-E ...

  2. SQLServer 创建自己的数据库

    1)进入数据库服务器,创建自己的数据库 use master go create database Dt_Devtest on primary(name=[Dt_new_data],filename= ...

  3. 根据IP获取所在的国家城市

    根据IP获取所在的国家城市 新浪的IP地址查询接口:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js 新浪多地域测试方法:htt ...

  4. Shell 比较两个数的大小

    格式很重要多一个空格少一个空格都可能出错 li@ubuntu:~/test$ cat compare.sh #!/bin/bash read x read y if [ $x -lt $y ] the ...

  5. 2、在VM上的 CentOS 6.5 上安装mysql

    1.查看系统是否安装了MySQL     使用命令:     #rpm -qa | grep mysql 2.卸载已安装的MySQL      卸载mysql命令如下:       #rpm -e - ...

  6. 安装PG3.0详细教程附图

    从公司要求开始着手调研PG到今天上午都还不知道如何安装PG.. 囧的离谱.. 看了半天的PG官网 就这个网页我瞅了半天..对你没看错 半天 少说有10分钟..原谅我的英文不是非常好..但是我知道什么意 ...

  7. GM Bosch Vetronix HP Tech 2 with CANDI

    Being I have owned some of these units. Can offer some advice… GM Tech 1, GM Tech 1a. Early and latt ...

  8. How to use CAR FANS C800 Diagnostic Scan Tool to do diagnosis operation

    How to use Heavy Duty Diagnostic CAR FANS C800 Diagnostic Scan Tool to do diagnosis operation Here i ...

  9. 监控MySQL主从脚本

    示例一: cat check_mysql_health #!/bin/sh slave_is=($(mysql -S /tmp/mysql3307.sock -uroot -e "show ...

  10. GoldenGate 12.2抽取Oracle 12c多租户配置过程

    linux下安装12c 重启linux之后,dbca PDB/CDB使用 SQL> select instance_name from v$instance; INSTANCE_NAME --- ...