左定宽度右自适应宽度并且等高布局实现代码

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

左侧固定宽，右侧自适应屏幕宽；
左右两列，等高布局；
左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）
要求不用JS或CSS行为实现；
仔细分析试题要求，要达到效果其实也并不是太难，只是给人感觉像有点蛋疼的问题一样。但是你仔细看后你会觉得不是那么回事：

左边固定，右边自适应布局，这个第一点应该来说是非常的容易，实现的方法也是相当的多，那么就可以说第一条要求已不是什么要求了；
左右两列等高布局，这一点相对来说要复杂一些，不过你要是了解了怎么实现等高布局，那么也是不难。我个人认为这个考题关键之处就在考这里，考你如何实现等高布局；所以这一点你需要整明白如何实现；
至于第三条要求，应该来说是很方面的，我们随处都可以看到实现最小高度的代码；
第四条这个要求我想是考官想让我们面试的人不能使用js来实现等高布局和最小高度的功能。
上面简单的分析了一下实现过程，那么最终关键之处应该是就是“让你的代码要能同时实现两点，其一就是左边固定，右边自适应的布局；其二就是实现两列等高的布局”，如果这两个功能完成，那么你也就可以交作业了。那么下面我们就先来看看这两 点是如合实现：

一、两列布局：左边固定宽度，右边自适应宽度
这样的布局，其实不是难点，我想很多同学都有实现过，那么我就在此稍微介绍两种常用的方法：

方法一：浮动布局

这种方法我采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果

HTML Markup