CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
2016-01-24 22:11
1146 查看
最近在百度 IFE 训练营中看见的一道题目:
个人总结出如下三种实现思路:
通过绝对定位实现
See the Pen absolute-two-column by xal821792703 (@honoka) on CodePen.
注意点如下:
需要套一个“positioned”的父元素
div-a 绝对定位,并将位置调整为浏览器左上角
div-b margin-left 属性值为 div-a 的宽度(因为 div-a 绝对定位已经脱离文档流,故不设定为 div-a 宽度的话,会相互覆盖)
div-c 绝对定位并将位置调整为正下方
需要自适应的 div 均设定宽度为100%
2. 通过浮动实现
See the Pen float-two-column by xal821792703 (@honoka) on CodePen.
注意点如下:
div-a 设定为左浮动
div-b 与上面一样需要将 margin-left 属性值设为 div-a 的宽度,原因同上,浮动也会脱离文档流
div-c 最好清除浮动,避免浮动的影响
3. 通过 BFC 规则实现
See the Pen bfc-two-column by xal821792703 (@honoka) on CodePen.
此处便不花大量篇幅介绍 BFC 了,可以参见下面两篇博文:
简而言之,BFC 可以帮助我们解决布局中左边元素脱离文档流后,右边元素的左外边距会触碰到包含块容器的左外边框的问题,就像下图:
现在我们仅需注意将 div-b 设定为 BFC 元素即可。
以上便是个人总结出的三种两列布局方法,源代码已同步至个人 repo,欢迎参考交流(笑)
个人总结出如下三种实现思路:
通过绝对定位实现
See the Pen absolute-two-column by xal821792703 (@honoka) on CodePen.
注意点如下:
需要套一个“positioned”的父元素
div-a 绝对定位,并将位置调整为浏览器左上角
div-b margin-left 属性值为 div-a 的宽度(因为 div-a 绝对定位已经脱离文档流,故不设定为 div-a 宽度的话,会相互覆盖)
div-c 绝对定位并将位置调整为正下方
需要自适应的 div 均设定宽度为100%
2. 通过浮动实现
See the Pen float-two-column by xal821792703 (@honoka) on CodePen.
注意点如下:
div-a 设定为左浮动
div-b 与上面一样需要将 margin-left 属性值设为 div-a 的宽度,原因同上,浮动也会脱离文档流
div-c 最好清除浮动,避免浮动的影响
3. 通过 BFC 规则实现
See the Pen bfc-two-column by xal821792703 (@honoka) on CodePen.
此处便不花大量篇幅介绍 BFC 了,可以参见下面两篇博文:
简而言之,BFC 可以帮助我们解决布局中左边元素脱离文档流后,右边元素的左外边距会触碰到包含块容器的左外边框的问题,就像下图:
现在我们仅需注意将 div-b 设定为 BFC 元素即可。
以上便是个人总结出的三种两列布局方法,源代码已同步至个人 repo,欢迎参考交流(笑)
相关文章推荐
- CSS那些事儿-阅读随笔2(选择符的组合与优先级/权重)
- html+css制作简易版Baymax
- 用css伪元素实现tooltip效果
- CSS+DIV:理论实战缺一不可
- css学习之id和class选择器
- 使用css垂直水平居中
- css学习之css语法
- CSS 布局 问题 及 解答
- LaTex 单栏样式模板中插入双栏表格
- css学习笔记20160120链接列表表格
- 读书笔记 精通CSS 高级Web标准解决方案(第2版)1~3章
- 我的网页搭建中篇02——网页布局01
- CSS实现文字随屏幕变化
- CSS学习03
- 手机页面上body不随遮罩层上内容一起滚动
- WEB前端(HTML、XML、CSS、JS)学习笔记
- html和css基础
- CSS float和absolute
- 第二章 选择器
- CSS权威指南 读书笔记 第一章 CSS和文档