使用relative实现两列布局的问题?
Demo如下:https://jsfiddle.net/y4okbek1/19/
如果用float的话,他的子类里边有嵌套的float,不想使用码砖块的布局,
absolute的话会脱离文档流,要给他的父类设置高,但实际情况是子类的高度不确定,
所以就想到了relative,但是实现过程中出了以上问题?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
目前 主流的 两栏布局,三栏布局 都是用float 实现的,
有清除浮动的代码在,问题不大。
只要避开一些 兼容性代码,还是很稳定的。
LZ 可能对 relative 还不理解,
虽然 给加上 relative 但它还是块状元素,是会新起一行来布局的。
如果只是针对 webkit 可以尝试 用flex-box 可以满足LZ的需求。
两列布局,这个在排版里面还是比较常见的,用relative定位是做不到的吧,有以下几种思路以供参考:
1.
div2 div3
都使用display:inline-bolock
2.
div1
使用display:table
,div2 div3
使用display:table-cell
个人比较喜欢第一种。
为何不用flex?
http://codepen.io/lishengzxc/pen/aOjeJY
题主说得float高度塌陷,在父元素上,写上overflow: hidden,触发BFC,是其高度自适应内容高度。