当你想实现两列等宽，左边一些内容，右边一些内容时，基本上都需要在一个容器的内部设置两个高度相等的列。每一面正好占用容器的一半，并且可以明显的区分他们。在CSS中有很多方法都可以实现，那么来看看如何用多种方法实现这种两列等宽布局。

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题，需要解决，花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧：

1. 左侧固定宽，右侧自适应屏幕宽；
2. 左右两列，等高布局；
3. 左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）
4. 要求不用JS或CSS行为实现；

仔细分析试题要求，要达到效果其实也并不是太难，只是给人感觉像有点蛋疼的问题一样。但是你仔细看后你会觉得不是那么回事：

说起CSS的布局，有太多了，现在常见的有固定布局、流体布局、弹性布局，有关于这三种常见的布局，Kayla Knight在《Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?》一文中做出了详细的对比介绍，而且Matthew James Taylor也给我们制作了很多个这方面的实例，大家还可以看看Float-less CSS layout带来的这三个类型的布局效果。随着CSS3的Media Queries出现，给我们的布局带来一种全新的体验——适应于多媒价的布局响应。

高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色，高度相等还是不相等都无关紧要，因为你只要在这些列的父元素中设置一个背景色就可以了。但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么的简单，但是我们使用CSS来创建等高列布局并非是那么容易的事情。

今天早上在阿当大侠的编写高质量前端代码群中与几位朋友一起探讨和学习了一种用div+css进行的三列（三栏）布局，而且是中间固定左右两边自适应宽度，听起来蛮有意思的。因为以前只是碰到过，左右两列固定而中间自适应的运用。于是思考一下马上敲起了键盘自己实战了一下，接着与大家一起测试，还是通过了各浏览器的考验，为了方便自己以后好查阅，也想让不知道的朋友一起学习一下这样的布局，特整理了一下代码，贴上来与大家一起分享和学习。