芒果小站

  1. 阿里云服务器 ECS

    应用于本站的云服务器

    猛击这里查看

  2. 阿里云对象存储 OSS

    海量、安全、低成本、高可靠的云存储服务

    猛击这里查看

  3. 阿里云关系型数据库 RDS

    把你的 MySQL 迁移到云端

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
1

CSS 左右两栏自适应布局

作者 芒果/分类 代码/发布于 2010-06-14 01:18

昨天在项目中遇到的一个 CSS 左右两栏自适应布局问题,做了个简单的演示稿,以作备份。

场景一:文字围绕

芒果 – mangguo.org
芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org

这种情况比较普遍,无论左侧容器是否定宽,只需对左侧设置左浮动即可实现文字围绕效果:

float:left;

场景二:右侧往下撑开

芒果 – mangguo.org
芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org

如果右侧需要往下撑开,仅仅左侧浮动是不够的,右侧容器需要设置溢出自动:

overflow:auto;

但 IE6 下无效,当然首先想到的是触发 hasLayout,那就简单加个 zoom 属性吧:

zoom:1;

可以发现,左右容器均无预设宽度,这样做的好处是实现了两栏内容的自适应。好了,多说无益,就这样吧。

版权所有,转载请注明出处。
转载自 <a href="https://mangguo.org/css-two-column-adaptation-layout/" title="CSS 左右两栏自适应布局" rel="bookmark">CSS 左右两栏自适应布局 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 1 条群众意见

  1. ≮果∮方≯ /2010-10-29 16:19

    火狐貌似还是没行。。 回应

    #1

下面我简单说几句