来源：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. Chrome浏览器相关细节整理

    一.上传文件卡死 可能时由于输入法的原因导致上传文件浏览器卡死.将输入法改为英文模式再操作上传文件就不会卡死了.

  2. Vuejs vm对象详解

    Vuejs vm对象详解 vue数据是怎么驱动视图的?一堆数据放在那里是不会有任何作用的,它必须通过我们的View Model(视图模型)才能操控视图. 图中的model其实就是数据,一般我们写成js ...

  3. GUI常用对象的属性

    %常用对象的属性 %.figure %hf=figure; %get(hf); %改变颜色 set Color %set(hf,'Color','w'); %去掉默认的菜单 Menubar %set( ...

  4. [转载]Oracle PL/SQL之LOOP循环控制语句

    在PL/SQL中可以使用LOOP语句对数据进行循环处理,利用该语句可以循环执行指定的语句序列.常用的LOOP循环语句包含3种形式:基本的LOOP.WHILE...LOOP和FOR...LOOP. LO ...

  5. <转>jmeter（八）断言

    本博客转载自:http://www.cnblogs.com/imyalost/category/846346.html 个人感觉不错,对jmeter讲解非常详细,担心以后找不到了,所以转发出来,留着慢 ...

  6. SQL知识点、SQL语句学习

    一. 数据库简介和创建1. 系统数据库在安装好SQL SERVER后,系统会自动安装5个用于维护系统正常运行的系统数据库: (1)master:记录了SQL SERVER实例的所有系统级消息,包括实例 ...

  7. Python+OpenCV图像处理（十三）—— Canny边缘检测

    简介: 1.Canny边缘检测算子是John F. Canny于 1986 年开发出来的一个多级边缘检测算法. 2.Canny 的目标是找到一个最优的边缘检测算法,最优边缘检测的含义是: 好的检测- ...

  8. Python爬虫——小说

    #encoding:utf8 import re import urllib2 url = 'http://www.23us.com/html/55/55304/' request = urllib2 ...

  9. ui-router .state参数配置

    .state('页面被引用时的变量名',{ template: '<h1>My Contacts</h1>',//被应用时插入的模板,状态被激活时,它的模板会自动插入到父状态对 ...

  10. ELK日志分析系统

    部署环境 192.168.1.147 kibana.logstash.Escluster-node-1 192.168.1.151 filebeat.Escluster-node-2.nginx 软件 ...