*{保证金：0;填充：0；}#左{浮动：左；宽度：220px；背景色：绿色；}#content{背景颜色：橙色；margin-left:220px;/*==等于左列宽度==*/}今天一早有朋友从妙维课堂转来一道CSS布局的面试题。需要解决，花了点时间写了几个DEMO。贴出来分享给大家。那么在看DEMO之前先看看这道面试题的具体要求：左边固定宽度，右边自适应屏幕宽度；左右两列，等高布局；左右两栏要求最小高度，例如：200px；（当内容超过200时，会以等高的形式自动增加）要求不使用JS或CSS行为实现；仔细分析一下试题的要求，实现效果并不算太难，但是感觉有点蛋疼的问题一样。但是仔细看之后你会发现不是这样的：左边是固定的，右边是自适应布局。这第一点应该很容易，实现的方法也挺多的。这不是必需的；左右栏的布局比较复杂，但是了解了如何实现等高布局就不难了。我个人认为这道试题的重点就在这里，如何实现轮廓布局；所以你需要了解如何实现这一点；至于第三个要求，应该是很全面的，我们随处可见到实现最小高度的代码；第四个要求我觉得是考官要我们面试人不要用js实现等高布局和最小高度功能。简单分析了上面的实现过程，最后的重点应该是“让你的代码同时实现两点，一个是左边固定布局，右边适配；另一个是实现两列等高。布局”，如果这两个功能都完成了，那你就可以交作业了。那么我们先来看看这两点是如何一起实现的：一列或两列布局：左边固定宽度，右边自适应宽度的布局，其实并不难。我想很多同学都已经实现了，那么我就给大家介绍两种常用的方法：方法一：浮动布局我用的这个方法是在左边浮动，在右边加一个margin-left值，这样就可以实现固定左侧和右侧的自适应布局效果HTML标记Leftsidebar
