点击登录
  • 欢迎访问亿浪博客,最新前端学习资料,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏亿浪博客吧

web前端开发中常见的css两列布局解决方案

前端设计 迷惘 1个月前 (08-20) 49次浏览 已收录 0个评论 扫描二维码

web前端开发中经常会见到两列布局的情况,整个页面中的主体部分内容分两列呈现给用户,通常会是侧栏和主栏的关系。这样的页面布局方式抽象到css布局中可以大致分为以下几种情况:两列定宽布局;一列定宽一列自适应页面宽度布局;一列不定宽一列自适应页面宽度布局。下面我们逐一来分析这几种两列布局的css解决方案。

两列定宽布局:两栏宽度固定,在页面中居中显示。

web前端开发中常见的css两列布局解决方案

web前端开发中常见的css两列布局解决方案汇总!

两列定宽布局实现代码

本案例通过css中的float极其clearfix属性实现了主栏660px宽,侧栏300px宽的两列布局。这个案例中需要注意的知识点是:应该在布局元素的父元素(class名为body的元素)上设置两栏总宽度,和居中显示;还有就是清除浮动的代码。

评价:由于屏幕尺寸和浏览器的差异,固定宽度页面已经不常见,所以该方案一般只作为前端学习时练习使用,现实案例中这种布局方案是很少见的。

一列定宽一列自适应布局

页面中一列固定宽度,一列自适应页面剩余宽度,整体处于页面居中位置。

方案一:使用float和margin和实现布局。

web前端开发中常见的css两列布局解决方案

web前端开发中常见的css两列布局解决方案汇总!

float和margin解决方案

本案例通过设置左侧side栏左浮动,让右侧main栏与side到达同一水平位置上。这时设置main元素的左间距为110px,因为side栏的固定宽度为100px,所以side和main之间还会有10px的间距。

评价:该方案在实际使用中还是较为常见的,使用float和margin可以支持绝大多数的浏览器。

方案二:使用float和overflow实现布局

web前端开发中常见的css两列布局解决方案

web前端开发中常见的css两列布局解决方案汇总!

float和overflow解决方案

本案例将案例一中的margin换成了overflow,设置overflow:hidden会触发BFC模式(BlockFormattingContext)块级格式化文本。BFC中的内容与外界的元素是隔离的。

评价:本方案代码简单,有一个缺点是不能兼容IE6.。

方案三:使用table实现布局

web前端开发中常见的css两列布局解决方案

web前端开发中常见的css两列布局解决方案汇总!

table解决方案

本方案使用table布局来实现一列定宽一列自适应的布局,将左右两栏作为表格的两列来实现布局,设置side栏的宽度为100px可以将一列的宽度设定好,不设置main栏的宽度,因为设置了table-layout:fixed;main栏会自动填充页面剩余宽度,从而实现布局。

评价:该方案在加载速度上会稍微慢一些,间距只能使用padding来设置,而不可以使用margin。

方案四:使用flex实现布局

web前端开发中常见的css两列布局解决方案

web前端开发中常见的css两列布局解决方案汇总!

使用flex实现布局

本案例将左右两栏的元素都设置为flex弹性元素,设定side栏的宽度为固定,设定main栏的宽度为自动适应剩余宽度,从而实现布局。

评价:该方案可以普遍用于移动端,但在pc端浏览器的兼容性还不是很好。

一列不定宽一列自适应布局

页面中一列不固定宽度,一列自动适应剩余宽度的布局方式。该种布局方式可以通过flex、table、float overflow三种方法实现,具体实现代码这里不再呈现,大家可以参考一列定宽一列自适应布局的解决方案自行修改,达到目标布局方案的样子。


亿浪博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明web前端开发中常见的css两列布局解决方案
喜欢 (0)
[]
分享 (0)
迷惘
关于作者:
亿浪博客是一个个人博客,主要写一些个人学习心得 、笔记什么的,分享下网络实用常识、 实用软件、 心情随笔 、手机技巧 、站长工具等文章!!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址