A JavaScript Fancier

伟大的javascript技术研究中...

  IT博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  304 随笔 :: 0 文章 :: 479 评论 :: 0 Trackbacks
<2008年5月>
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567

公告

本blog为作者本人学习JS脚本所用,未经特别声明,本站所有文章均属作者本人原创,请转载时注明来源!谢谢合作!同时希望与各位javascript爱好者交流学习。MSN:yanwei8410@hotmail.com

常用链接

留言簿(26)

随笔分类

随笔档案

Ajax技术站点

javascript学习站点

JS高人Blog

Ruby&&Ajax框架

Web技术站点

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜


今天看到经典一网友问题:不知为什么,它们三个中间总是有一条缝?
代码如下:
<style>
#left 
{
 width
:5px;
 height
:23px;
 background-color
:#ff6600;
 float
:left; /*浮动居左*/
 clear
:left; /*不允许左侧存在浮动*/
 overflow
:left; /*超出宽度部分隐藏*/
}
#right 
{
 width
:5px;
 height
:23px;
 background-color
:#ff6600;
 float
:right; /*浮动居左*/
 clear
:right; /*不允许左侧存在浮动*/
 overflow
:right; /*超出宽度部分隐藏*/
}
#m 
{
 
/*width:794px; 调整菜单位置*/
 height
:23px;
 background-color
:#000000;
 margin
:0px auto;
 
/*padding-left:40px;*/
 display
:block;line-height:22px;
}
</style>
<div id=left></div>
<div id=right></div>
<div id=m></div>
一个朋友用margin:-3px的办法把问题解决了,但没有找到问题根本所在,偶看了下代码,感觉应该是块元素在作怪,因为楼主定义中间一块的属性display:block;在css中块元素总是会留出一定的空白,另外clear属性可能一会导致块元素的形成。
最后偶将代码改成这样(设定固定大小,去除块元素属性):
<style>
#all
{
  width
:600px;
}

#left 
{
 width
:5px;
 height
:23px;
 background-color
:#ff6600;
 float
:left; /*浮动居左*/
}
#right 
{
 width
:5px;
 height
:23px;
 background-color
:#ff6600;
 float
:right; /*浮动居左*/
}
#m 
{
 height
:23px;width:590px;
 background-color
:#000000;
 line-height
:22px;
 float
:left
}
</style>
<div id="all">
<div id=left></div>
<div id=right></div>
<div id=m></div>
</div>

posted on 2006-06-27 17:31 Yemoo'S JS Blog 阅读(589) 评论(0)  编辑 收藏 引用 所属分类: HTML/XHTML/CSS
只有注册用户登录后才能发表评论。
51La