浏览模式: 普通 | 列表
8月, 2010 | 1

Float浮动布局Box高度冲突的三个解决办法

[ 2010-08-16 21:56:15 | 作者: admin ]
这个问题应该是使用标准布局发生兼容性问题的“典范”了，干网页制作的人几乎都遇见过，我在做页面的时候也遇见过。因为#box的.left与.right都浮动了，所以#box计算不到子元素的高度;导致#box没有获得高度，没有高度就局限了background与border的显示区域。

解决方法一：

#boxBg {float:left;}

再#box后面再加一个容器#boxBg，让它浮动起来。因为#boxBg也浮动起来了，所以它跟里面的.left与.right是属于一个层面上的位置，所以这样#boxBg就能计算子元素的高度了。#box用来限制宽度以及居中，background和border的显示与高度计算就用#boxBg来实现 。

代码如下

以下为引用的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
...

阅读全文…
分类: H5/JS/CSS | 永久链接 | 评论: 0 | 引用: 0 | 浏览: 1635
1