“万恶”的“float”
2008/6/19 0:53:59
阅读全文(3681) | 回复(4) | 编辑 | 精华
CSS 中的 float 在 WEB 从 TABLE 布局时代转向 DIV 布局时代可谓功不可没。但是，随着新浏览器的不断加入，特别是 Firefox 的诞生，float 就与“万恶”这个词联系起来，甚至成为其代名词的意思。终于 HACK CSS 用法让 float 得到平反。一句 style="clear:both;" 让使用 float 的 DIV 的背景色“重见天日”。 如今，这个 float 又一次让我感到它的“万恶”。代码如下： <div style="float:left;"> <img src="skin/11.gif" alt="11.gif" title="11.gif"/></div> IE 下正常，FF 下，img 始终不肯“露面”，哪怕是“昙花一现”。 想起 DIV 的背景色的问题，便怀疑是 float 再一次作怪。但是此处使用 clear:both 似乎没有解决问题。花了不少时间在搜索 WEB 资源，关键词 “firefox float css img”，终于发现一个建议： IMG {display:block} 图片终于露出了真面目，然而，这不是我想要的，我要将图片作为和文字并列在一起，因为 block 的因素，img 换行显示。问题没有能够解决，再一次陷入困境。 有没有一个替代的方法呢？有!把 img 装在非 float 标记中。说干就干： <div style="float:left;"> <ul> <li><img src="skin/11.gif" alt="11.gif" title="11.gif"/></li> <li><a href="#">文字链接</a></li> </ul></div>结合 CSS ，终于上 IMG 乖乖的显示出来，并和文字横向并列。 但是我没有就此罢休，不增加 html 标记能不能成功呢？能，还是 CSS 来帮忙： IMG {display:block;float:left} 问题至此为止，圆满解决!晕， float 又成为解决的关键，呵呵! 夜已深，结束博文500)this.width=500'>500)this.width=500'>500)this.width=500'> PS：备忘，特记于此! ====================================== 更正调试时，我没有象kinogam一样，“遇到布局问题都会把东西拆分出来调试”，而是在没有注释掉UL的情况下，直接加入IMG的引用，如下：<div style="float:left;"> <img src="skin/11.gif" alt="11.gif" title="11.gif"/> <ul> <li><img src="skin/11.gif" alt="11.gif" title="11.gif"/></li> <li><a href="#">文字链接</a></li> </ul></div> 在IE和FF中正常，所以就定下结论：IMG {display:block;float:left}这样使用没有问题，然后简单认为调试通过。次日，我将UL注释后，发现float没有成为解决问题的关键，IMG引用无效，怀疑如kinogam说的一样，是我其它的问题引起。这个问题，下一步会继续调试解决…… 特此更正!
Posted by Qr on 2008/6/19 0:53:59
回复:“万恶”的“float”
2008/6/21 12:16:58
个人主页 | 引用回复 | 主人回复 | 返回 | 编辑 | 删除
以下引用kinogam在2008-6-20 23:00:34的评论:那个链接是国外链接，多试几次应该能打开……今天去书店走了走，发现很多讲CSS的书，但是我还是觉得不如早期的我买的那本《精通CSS》一书深入，而且还有讲到CSS HACK，还有一些远程跳转之类的技巧。打开了，XML的网站通常反应有点慢，更何况是国外链接。
Posted by Qr on 2008/6/21 12:16:58
回复:“万恶”的“float”
2008/6/20 23:00:34
个人主页 | 引用回复 | 主人回复 | 返回 | 编辑 | 删除
以下为blog主人的回复： 链接打不开 那个链接是国外链接，多试几次应该能打开……今天去书店走了走，发现很多讲CSS的书，但是我还是觉得不如早期的我买的那本《精通CSS》一书深入，而且还有讲到CSS HACK，还有一些远程跳转之类的技巧。
Posted by Kinogam on 2008/6/20 23:00:34
回复:“万恶”的“float”
2008/6/19 10:17:24
个人主页 | 引用回复 | 主人回复 | 返回 | 编辑 | 删除
还有要把文字和图片在一起的话可以对 <a>设置背景比如 background:url(kinogam.gif) no-repeat left center;然后设置文字的padding:5px;(图片的宽度左右)之后适当调整下高度，这样就ok了。有时候甚至文本内容过长变成几行，图片也还是可以靠左纵向居中相当便利。http://www.myjavaserver.com/~kinogam/xmlxsl/index.xml这个当时也是css+div布局的。 以下为blog主人的回复： 链接打不开
Posted by Kinogam on 2008/6/19 10:17:24
回复:“万恶”的“float”
2008/6/19 10:10:35
个人主页 | 引用回复 | 主人回复 | 返回 | 编辑 | 删除
<div style="float:left;"> <img src="bak/images/kinogam.gif" alt="kinogam.gif" title="kinogam.gif"/></div>我单独这样写的话没有什么问题。只要div里面有内容的话，就算是float的话还是会显示的。我觉得这里可能是你的外层元素的影响。我每次遇到布局问题都会把东西拆分出来调试。 以下为blog主人的回复： 多谢提醒!
Posted by Kinogam on 2008/6/19 10:10:35
| 发表评论： |