本文介绍了四种技术在实现网页双栏布局中的应用：1)使用`float`和`margin`；2)利用`float`配合`BFC`；3)采用定位和`margin`；4)基于`flex`布局。每种方法都详细说明了步骤和原理。
最简单 方案:
使用: float+margin
1 首先准备一个块级父元素 , 父元素中有两个子元素,分别作为左右两栏;
2 将左元素 设置浮动, 会使元素脱离文档流,右元素位置上移
3 防止右元素被左元素挡住,这时只需要给右元素加外边距 就行了
简简单单的完成了 双栏布局
使用 : float+BFC
1 准备一个块级父元素,父元素里面有两个元素,分别作为左右两栏
2 将左元素设置浮动,会使元素脱离文档流,右元素位置 上移
3 防止右元素被左元素挡住,需要给右元素外另一个父元素,并触发该父元素的BFC
使用: 定位 + margin
将父元素设置为相对定位,左元素设置绝对定位,右元素设置margin-left的值
使用 flex 浮动
父元素 设置 display:flex, 右元素设置 flex:1 即可
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
