您的位置:首页 > Web前端 > CSS

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

2017-06-29 18:20 246 查看

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

方法1:浮动布局

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

HTML:



CSS:



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

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

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

HTML:



CSS:



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

三:实现最小高度



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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  css