| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 929 人关注过本帖
标题:div布局时所遇到的一些小问题
只看楼主 加入收藏
lele2007
Rank: 5Rank: 5
来 自:广东省深圳
等 级:职业侠客
威 望:6
帖 子:1028
专家分:305
注 册:2007-9-4
结帖率:100%
收藏
 问题点数:0 回复次数:5 
div布局时所遇到的一些小问题
大家好!我用div+css布局网页!(在学习中)我在做一个导航时因为在学习所以也用div+css来实现.
一个总的div标签,包含其它子 div标签!代码是这样的:
<div id="all">
<div id="all_1">这里是第一列</div>
<div id="all_2">这里是第二列</div>
<div id="all_3">这里是第三列</div>
<div id="all_4">这里是第四列</div>
<div id="all_5">这里是第五列</div>
</div>
我是这样来做的,all总的是:800px;每列的width是:160px;这样恰好五列填满了all.但是我数学差.又因为想为了美观,所以在每个all_1到all_5里用了padding:5px;
但是这样所得出来的最后总数却不是总all的width的宽度了.所以想问下,这样如何来计算分配每列分多少width的px呢?555数学不好,不会计算呀.谢谢帮个忙!不知道怎么样才可以有个实际的数值.而不用导至用一个相差不大的数值来顶替了.十分感谢!!!!!!!!![bc10]
搜索更多相关主题的帖子: div 
2008-02-22 10:41
lele2007
Rank: 5Rank: 5
来 自:广东省深圳
等 级:职业侠客
威 望:6
帖 子:1028
专家分:305
注 册:2007-9-4
收藏
得分:0 
我给它们这样分都不行:
#happy_all #happy_daohang{
    width: 973px;
    height:25px;
    background-color:#0099FF;
}
#happy_all #happy_daohang #daohang_left{
    width: 847px;
    height:7.5px;
    padding:5px;
    float: left;
}
#happy_all #happy_daohang #daohang_right{
    width: 116px;
    height:7.5px;
    padding:5px;
    float:right;
}

学习编程www.
2008-02-22 10:51
lele2007
Rank: 5Rank: 5
来 自:广东省深圳
等 级:职业侠客
威 望:6
帖 子:1028
专家分:305
注 册:2007-9-4
收藏
得分:0 
555没朋友帮忙看下

学习编程www.
2008-02-23 21:54
xiaobai40510
Rank: 1
等 级:新手上路
帖 子:74
专家分:0
注 册:2007-9-26
收藏
得分:0 
传代码过来看看呗!你为什么不用<ul><li>结合float来做呢?这样好像比较容易控制一些吧。

2008-02-24 11:04
hmhz
Rank: 7Rank: 7Rank: 7
等 级:贵宾
威 望:30
帖 子:1890
专家分:503
注 册:2006-12-17
收藏
得分:0 
你外边框 #all 一定设置了边框 那就需要再加 2px  一共802px
程序代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. lang="en" xml:lang="en">
<head>
<style>
body {font-size:12px;}
#all {width:802px; height:auto; border:1px solid #d6d6d6; text-align:center;}
#all #all_1,#all #all_2,#all #all_3,#all #all_4,#all #all_5 {float:left; padding:5px; width:160px; height:auto;}
</style>
</head>

<body>
<div id="all">
<div id="all_1">这里是第一列</div>
<div id="all_2">这里是第二列</div>
<div id="all_3">这里是第三列</div>
<div id="all_4">这里是第四列</div>
<div id="all_5">这里是第五列</div>
</div>
</body>

</html>
2008-02-24 13:25
lele2007
Rank: 5Rank: 5
来 自:广东省深圳
等 级:职业侠客
威 望:6
帖 子:1028
专家分:305
注 册:2007-9-4
收藏
得分:0 
明白了,感谢!

学习编程www.
2008-04-16 10:09
快速回复:div布局时所遇到的一些小问题
数据加载中...
 
   



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

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