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

方法1:浮动布局

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

HTML:

CSS之左定宽度右自适应宽度并且等高布局

CSS:

CSS之左定宽度右自适应宽度并且等高布局

上面这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值,大家可以点击查看上面代码的DEMO

方法2:浮动和负边距实现

这个方法采用的是浮动和负边距来实现左边固定宽度右边自适应宽度的布局效果

HTML:

CSS之左定宽度右自适应宽度并且等高布局

CSS:

CSS之左定宽度右自适应宽度并且等高布局

二:等高布局(参见等高布局一文)

三:实现最小高度

CSS之左定宽度右自适应宽度并且等高布局

上面的代码就轻松的帮我们实现了跨浏览器的最小高度设置问题。这样一来,我们可以交作业了,也完面了这个面试题的考试。为了让大家更能形象的了解

相关文章: