| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 3081 人关注过本帖
标题:Div+CSS布局里父容器自动高的问题
只看楼主 加入收藏
zys4416
Rank: 1
等 级:新手上路
帖 子:44
专家分:0
注 册:2006-2-10
收藏
 问题点数:0 回复次数:5 
Div+CSS布局里父容器自动高的问题
如下面代码示例的一个布局:

<div id="box">
  <div id="top"></div>
  <div id="main"></div>
  <div id="bottom"></div>
</div>

CSS代码如下:

#box {
    width: 202px;
    margin: 0 auto;
    padding: 2px;
    border: 1px solid #999999;
}
#top {
    height: 30px;
    width: 200px;
    float: left;
    margin-bottom: 2px;
    border: 1px solid #99CCCC;
}
#main {
    height: 150px;
    width: 200px;
    float: left;
    margin-bottom: 2px;
    border: 1px solid #FFCC99;
}
#bottom {
    height: 20px;
    width: 200px;
    float: left;
    border: 1px solid #CCCC99;
}

这里ID="box"的容器不指定高,如果不添加float: left;的话,那么所有浏览器显示效果如图1所示,但如果添加上float: left;后,Dreamweaver和Firefox的显示效果就如图2所示了。虽然IE7的显示效果始终是图1所示,不过……都知道IE不是一个符合标准的浏览器。
在这个例子中加不加浮动控制无大碍,但在复杂点的布局中肯定是需要用到的。请问大家这问题怎么解决?

图1:
图片附件: 游客没有浏览图片的权限,请 登录注册

图2:
图片附件: 游客没有浏览图片的权限,请 登录注册


[[it] 本帖最后由 zys4416 于 2008-7-23 10:47 编辑 [/it]]
搜索更多相关主题的帖子: Div CSS 容器 自动 
2008-07-23 10:42
zys4416
Rank: 1
等 级:新手上路
帖 子:44
专家分:0
注 册:2006-2-10
收藏
得分:0 
我实验发现#box中添加float:left;后就OK了!不过,整个页面就不居中了……

学途漫漫而修远,为何行?心自明,只求点滴收获,积米成山,既成、无憾矣。     -zys
2008-07-24 09:01
zys4416
Rank: 1
等 级:新手上路
帖 子:44
专家分:0
注 册:2006-2-10
收藏
得分:0 
再次试验,在#box下再嵌套一个#box2,代码如下:
#box {
    width: 206px;
    margin: 0 auto;
    padding: 2px;
}
#box2 {
    width: 202px;
    float: left;
    padding: 2px;
    border: 1px solid #999999;

#box是隐藏的,基本解决了问题……

学途漫漫而修远,为何行?心自明,只求点滴收获,积米成山,既成、无憾矣。     -zys
2008-07-24 09:50
大砍刀
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2008-8-18
收藏
得分:0 
不错,学习了。。。。。。

[url=http://www..cn/seobbs/]网络营销[/url]  
2008-08-27 14:21
zzy4692
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2008-11-1
收藏
得分:0 
不错学习一下。
2008-11-16 15:10
atp200cn
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2010-3-16
收藏
得分:0 
可以设置#bottom的属性:clear: both;并且不要设置任何浮动方式float;
2010-03-16 09:05
快速回复:Div+CSS布局里父容器自动高的问题
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.032445 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved