CSS: 实现两栏布局，左边固定，右边自适应的4种方法

作者: 图恩分类: 编程开发阅读: 710发布时间： 2020-04-12

1. float+overflow:hidden 这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性，所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码如下： Document

left left left left

right

2. float: left+ margin-left float使左边的元素脱离文档流，右边的元素可以和左边的元素显示在同一行，设置margin-left让右边的元素不覆盖掉左边的元素，代码如下： Document

left left left left

right

3. position: absolute + margin-left 左边绝对定位，右边设置margin-left，代码如下： Document

left left left left

right

4. flex布局 flex布局可以使两个子元素显示在同一行，只要左边的宽度固定，就可以实现效果，代码如下： Document

left left left left

right

发表评论 (审核通过后显示评论)：

专题推荐
从零搭建博客
前端开发
javascript教程
vue3+ts教程
推荐阅读
- 1超速驾驶被扣6分，罚款200元
  阅读：810 发布时间：2025-07-28 22:34:41
- 2回长沙参加老婆妹妹的婚礼
  阅读：682 发布时间：2025-08-10 21:53:45
- 3umami统计：适合个人网站的专业统计工具
  阅读：681 发布时间：2025-12-11 22:10:45
- 4比亚迪的刹车偏软如何通过车机设置解决
  阅读：554 发布时间：2025-08-18 22:17:33
- 5CleanAds：百度、Bing、CSDN 广告清理插件
  阅读：484 发布时间：2025-10-10 21:19:32
- 6如何整治各种网络爬虫（比如SemrushBot）
  阅读：465 发布时间：2025-12-02 22:35:29
- 7下班后打车碰到女司机
  阅读：416 发布时间：2025-08-18 22:35:36
- 8如何将Node.js REST API转换为AI专用的MCP服务器
  阅读：338 发布时间：2025-12-27 23:56:12
- 9利用AI自动发布文章效果如何？
  阅读：289 发布时间：2025-11-30 21:21:53
- 102025年国庆回家行程记录
  阅读：287 发布时间：2025-10-09 22:25:15

CSS: 实现两栏布局，左边固定，右边自适应的4种方法

发表评论 (审核通过后显示评论)：

文章评论(0)