两列自适应布局方案整理

前提

本文讨论的是两列自适应布局：左列定宽/不定宽，右列自适应。

虽然分这两种状况，但实际上不定宽的方案一样适用于定宽的场景，所以不定宽的方案泛用度更高。

左列定宽，右列自适应

margin + float

<div class="parent">
	<div class="left"><p>left</p></div>
	<div class="right-fix">
		<div class="right">
			<p>right</p><p>right</p>
		</div>
	</div>
</div>
复制代码

.left{
		float: left;     //向左浮动
        width: 100px;    //固定宽度
		position: relative;//因为.left与.right-fix重合，且.right-fix在DOM树上的位置比.left要后，所以.right-fix会遮挡住.left，设置.left为relative可让其冒出来。
	}
	.right-fix{
		float: right;     //向右浮动
        width: 100%;    //为了自适应设为100%
		margin-left: -100px;//因为宽度设为100%，.right-fix遭到浏览器换行处理；所以经过设置负的margin值，在左侧制造出100px的空白，使.right-fix与.left重合（即处于同一行）
	}
	.right{
		margin-left: 120px;    //因为.left和.right-fix重合了，所以给.right设置一个margin-left，避免内容区（.right）与.left重合。另外，120px - 100px = 多出来的20px实际上就至关于.left和.right之间的间隔了。
	}
复制代码

这个方法其实已是兼顾到低版本IE的完善版本了，缺点是代码冗长，并且有两个关键知识点比较难理解：

1. 给.left加上position:relative;怎么就能让.left冒出来而不受.right-fix的遮挡了呢？
2. .right-fix设置负的margin-left，怎么就能使.left与.right-fix重合了呢？

再者，这个方案因为.right-fix的margin-left和.left的width高度耦合，所以没法实现自适应，只能应用在左列（固然右列也成）固定宽度的场景。

absolute

<div class="parent">
	<div class="left">
		<p>left</p>
	</div>
	<div class="right">
		<p>right</p>
		<p>right</p>
	</div>
</div>
复制代码

.parent{
	position: relative;
}
.left{
	position: absolute;
	left: 0;
	width: 100px;
}
.right{
	position: absolute;
	left: 120px;    //比.left的left多出20px，至关于间隔
	right: 0;
}
复制代码

这种方法是经过absolute配合left/right进行布局：

1. 设置display: absolute后，经过top/right/bottom/left能够实现对元素的位置进行像素级的任意控制。所以，使用left属性便可控制各元素的起始位置，避免重叠。
2. 自适应的关键在于left和right属性，在对元素同时设置这两个属性后，元素的宽度便会遭到拉伸，实现自适应。
3. 须要注意的是父级元素须要设置display: relative。

这种方案很容易理解，但缺点就是不能作到**“不定宽”**，由于.left和.right的left属性的值高度相关。

左列不定宽，右列自适应

float + BFC

<div class="parent">
	<div class="left">
		<p>left</p>
	</div>
	<div class="right">
		<p>right</p>
		<p>right</p>
	</div>
</div>
复制代码

.left{
	float: left;
	width: 100px;
	margin-right: 20px;    //造成20px的间隔
}
.right{
	overflow: hidden; //经过设置overflow: hidden来触发BFC特性
}
复制代码

这个方法主要是应用到BFC的一个特性：

1. 浮动元素的块状兄弟元素会无视浮动元素的位置，尽可能占满一整行，这样该兄弟元素就会被浮动元素覆盖。
2. 若浮动元素的块状兄弟元素为BFC，则不会占满一整行，而是根据浮动元素的宽度，占据该行剩下的宽度，避免与浮动元素重叠。
3. 浮动元素与其块状BFC兄弟元素之间的margin能够生效，这将继续减小兄弟元素的宽度。

并非必定要在.right上用overflow: hidden;，只要能触发BFC就行了，另外在IE6上也能够触发haslayout特性（推荐用*zoom: 1;）。 因为.right的宽度是自动计算的，不须要设置任何与.left宽度相关的css，所以.left的宽度能够不固定（由内容盒子决定）。

table布局

<div class="parent">
	<div class="left">
		<p>left</p>
	</div>
	<div class="right">
		<p>right</p>
		<p>right</p>
	</div>
</div>
复制代码

.parent{
	display: table; width: 100%;
	table-layout: fixed;
}
.left,.right{
	display: table-cell;
}
.left{
	width: 100px;
	padding-right: 20px;
}
复制代码

这个方法是表格布局的典型运用。说真的，我也很迷惘要不要使用表格布局，毕竟已是上个时代的产物了，虽然已经再也不用<table>的HTML结构了，但用上相应的CSS其实思路跟之前是变化不大的。 这个方法主要是利用了表格(table)的宽度必然等于其全部单元格(table-cell)加起来的总宽度，那么只要表格的宽度必定，其中一个（或几个）单元格的宽度也必定，那么另一个未设置宽度的单元格则会默认占满剩下的宽度，即实现自适应。

flex

<div class="parent">
	<div class="left">
		<p>left</p>
	</div>
	<div class="right">
		<p>right</p>
		<p>right</p>
	</div>
</div>
复制代码

.parent{
	display: flex;
}
.left{
	margin-right: 20px;
}
.right{
	flex: 1;
}
.left p{width: 200px;}
复制代码

flex布局的自适应我就很少说了，原本就是设计来自适应的，只须要用上flex: 1;，就能让.right分到.parent的宽度减去.left的宽度。

推荐使用

我我的是比较推荐用float + BFC方案，浏览器兼容性很好，代码量也少，另外也很好理解；移动端上也能够考虑用上flex方案，不过仍是那一句，注意用旧版的flex，兼容性会好一点。

扩展

说是说**“两列自适应布局”**，实际上，只要知足“只有一列是自适应”这一条件，多少列布局都行。

参考文章

• 《The Definitive Guide to Using Negative Margins》

• 《前端精选文摘：BFC 神奇背后的原理》