CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)

左侧固定宽，右侧自适应屏幕宽；

左右两列，等高布局；

左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）

要求不用JS或CSS行为实现；

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

左边固定，右边自适应布局，这个第一点应该来说是非常的容易，实现的方法也是相当的多，那么就可以说第一条要求已不是什么要求了；

左右两列等高布局，这一点相对来说要复杂一些，不过你要是了解了怎么实现等高布局，那么也是不难。我个人认为这个考题关键之处就在考这里，考你如何实现等高布局；所以这一点你需要整明白如何实现；

至于第三条要求，应该来说是很方面的，我们随处都可以看到实现最小高度的代码；

第四条这个要求我想是考官想让我们面试的人不能使用js来实现等高布局和最小高度的功能。

上面简单的分析了一下实现过程，那么最终关键之处应该是就是“让你的代码要能同时实现两点，其一就是左边固定，右边自适应的布局；其二就是实现两列等高的布局”，如果这两个功能完成，那么你也就可以交作业了。那么下面我们就先来看看这两 点是如合实现：

一、两列布局：左边固定宽度，右边自适应宽度

这样的布局，其实不是难点，我想很多同学都有实现过，那么我就在此稍微介绍两种常用的方法：

方法一：浮动布局

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

HTML Markup

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表