芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 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="http://mangguo.org/css-two-column-adaptation-layout/" title="CSS 左右两栏自适应布局" rel="bookmark">CSS 左右两栏自适应布局 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 1 条群众意见

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

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

    #1

下面我简单说几句