两列布局常见方法

[jiangshanmeta]

画页面最开始要想好的就是如何进行布局。两列布局既是一种常见的布局方式，又是多列布局的基础。本文就我所熟悉的两列布局方式进行总结和比较。

浮动布局

浮动最初是为文字环绕功能而设计的，然而现在成了基本的布局方式。

熟悉bootstrap的人都知道，其经典的12列网格设计就是基于浮动所实现的。bootstrap的网格主要的知识点就是浮动+ box-sizing:border-box + 媒体查询.

浮动所带来的问题是盒子的塌陷，bootstrap的网格布局解决方案是采取百分比进行限制。这样实现的是两列自适应布局。

bootstrap采用的是两列均左浮动实现两列布局，那么一列左浮动可不可以？当然可以。只要给右侧足够的margin-left就行了。这种布局方式有什么问题呢？一是margin-left值是要写死在代码里的，这一点其实还好，因为基本上大的布局不会变，所以基本上不会改。二是如果右侧有清除浮动的元素，会影响布局。

有什么方法解决上面说的第二个问题呢？对第二个列加上一行overflow:hidden;就好了。原理是形成BFC然后自己就玩自己的去了。

上面基本上说的是左侧定宽右侧自适应，如果我想实现右侧定宽左侧自适应，你可能说简单，右侧float:right;加上一个固定的宽度，左侧margin-right即可。确实没错，但是这要求右侧定宽区域的html更靠前，而感觉上左侧才应该更靠前。如果我偏要实现左侧靠前呢（一般是处于SEO的考虑），我们可以考虑结合浮动和负值margin

<div id="left-wrap">
	<div id="left-cont"></div>
</div>
<div id="right-cont">
</div>	

#left-wrap{
	float:left;
	width:100%;
}
#left-cont{
	margin-right:200px; //假设右侧定宽为200px
}
#right-cont{
	float:left;
	margin-left:-200px;
}

类似的思路，可以实现左右两侧定宽中间自适应且中间html更靠前的三列布局

column

coolumn的出现是为了模仿报纸的排版的，如果想要实现文字的两列或者多列布局，应用column布局很轻松，然而，不幸的是，如果想要使用column布局的话，我建议还是放弃这个想法吧，一方面各大浏览器对其支持还不够，需要加私有前缀，另

table

这里的table指的可不是HTML中的table，而是display:table;利用table布局很容易实现两列布局，而且还能顺便实现等高布局。关于table的各种坑，我以后会做一个总结。

flex

flex确实是布局神器，然而在生产环境下还是注意一下的好，移动端的情况稍微好点，然而在pc端IE10才支持，至少在pc端有替代方案的就用替代方案吧

inline-block

display:inline-block;确实是可以实现两列布局，如果两列宽度加起来不够父元素的宽度，那还好说，如果你想两个元素宽度均为50%,你很有可能会发现并没有实现。原因是两列之间有空格，两个50%加上一个空格显然超过100%。解决方案可以是通过那双灵巧的手，写HTML的时候注意空格，然而对于这种缩进会被不经意间手抖改掉，所以你还要写三遍注释告诉别人和自己不要手抖。这么干的人实在是太无聊了。靠谱点的解决方案是设定父元素font-size:0;，然后两列字体大小该多少是多少，是个靠谱的解决方案。

总结起来我个人倾向于各种基于浮动的方案。