标题:css+div布局问题:有点经验的来看看这个问题
取消只看楼主
renqian1320
Rank: 1
等 级:新手上路
帖 子:126
专家分:0
注 册:2005-6-27
 问题点数:0 回复次数:6 
css+div布局问题:有点经验的来看看这个问题

我用div布局一个2行3列的的页面,但是我有个凝问?
代码如下
<style type="text/css">
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;background-color:#FF0000;}
#column2{ float:right; width:30%;background-color:#FFFF00;}
#column3{ float:right; width:40%;background-color:#00FF00;}
.clear{ clear:both;}
</style>
<div id="header">这里是顶行</div>
<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>

我F12后 这个布局外观是出来了,但是我发现第二行的第二列和第一列有个空白,请问有什么方法可以解决这个问题,急

搜索更多相关主题的帖子: div布局 css float 经验 
2006-04-24 13:55
renqian1320
Rank: 1
等 级:新手上路
帖 子:126
专家分:0
注 册:2005-6-27
得分:0 

我用这个代码,用float布局一个3列的布局,虽然从外观上可以实现,但是不知道,这样布局行不行.
<style type="text/css">
#m{width:100%;height:50%;}
#n{float:left;width:40%;background-color:#CC9900;}
#b{float:left;width:40%;background-color:#FF0000;}
#f{background-color:#999999;}
</style>
<div id="m">
<div id="n">我的爱人</div>
<div id="b">我的朋友</div>
<div id="f"> 我的通货</div>
</div>
上面我试过了,3列都在一条线上,不知道对不对?
上面的那个代码,我是在别人的网页看到的,难道他门弄错了?
还是什么?我用这个就能轻松实现3列的布局.请高手指点?


2006-04-24 15:48
renqian1320
Rank: 1
等 级:新手上路
帖 子:126
专家分:0
注 册:2005-6-27
得分:0 
<style type="text/css">
#m{width:100%;height:50%;}
#n{float:left;width:40%;background-color:#CC9900;}
#b{float:left;width:40%;background-color:#FF0000;}
#f{background-color:#999999;float:left;}
</style>
<div id="m">
<div id="n">这是第一列</div>
<div id="b">这是第二列</div>
<div id="f">这是第三列</div>
</div>
这样也可以.我试了几次,发现在f的规则中,如果加了宽度则会自动换行,不会在一条线中显示,如果把f规则设置成float:right;虽然在同一条线上,但是中间会多了个空白.但是这样就不能设置第3列的宽度了?郁闷 还是没解决,高手哪去了?

2006-04-24 16:23
renqian1320
Rank: 1
等 级:新手上路
帖 子:126
专家分:0
注 册:2005-6-27
得分:0 
<style type="text/css">
#m{width:100%;height:auto;}
#n{float:left;width:40%;background-color:#CC9900;}
#b{float:left;width:40%;background-color:#FF0000;}
#f{background-color:#999999;}
</style>
<div id="m">
<div id="n">这是第一列</div>
<div id="b">这是第二列</div>
<div id="f">这是第三列</div>
</div>
这样就可以自自己解决第3列的高度,
OK了,我要是有什么理解错了的,见笑了,完全自己摸索的 

2006-04-24 16:37
renqian1320
Rank: 1
等 级:新手上路
帖 子:126
专家分:0
注 册:2005-6-27
得分:0 

有没有css布局的行家,进来指点下小弟.关于布局一个多列并在同一条线上的问题.虽然我自己摸索实现了,但我怕理解错了,有问题.


2006-04-24 16:39
renqian1320
Rank: 1
等 级:新手上路
帖 子:126
专家分:0
注 册:2005-6-27
得分:0 
问题还是出来了,哎,
style type="text/css">
#m{width:100%;height:auto;}
#n{float:left;width:40%;background-color:#CC9900;}
#b{float:left;width:40%;background-color:#FF0000;}
#f{background-color:#999999;}
</style>
<div id="m">
<div id="n">这是第一列</div>
<div id="b">这是第二列</div>
<div id="f">这是第三列</div>
</div>
想上面这样的代码 弄3列出来是可以,但是要4列呢?
就解决不了

2006-04-24 16:49
renqian1320
Rank: 1
等 级:新手上路
帖 子:126
专家分:0
注 册:2005-6-27
得分:0 
谢谢版主了.

2006-04-25 17:13



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-59712-1-1.html




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

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