草窟设计 » 2010 » 三月

网页设计中常常碰到层高度无法撑开，只显示一条直线的情况，这主要是该层内部使用了 float 属性。通常解决方法是在该层内部加一个 <div style=”clear:both;”></div> 清除一下浮动即可，这也是我用的最多的方法。这儿是用的 DIV，wordpress 模板里很多人用的 HR。个人认为没有什么区别，可能就是少几个字母吧。另一个方法是我刚刚从google 里发现的，感觉非常好，在这儿要非常感谢这位网友，以后我会经常使用这个方法。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS清除浮动</title> <style type="text/css"> *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;overflow:auto;zoom:1;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} </style> </head> <body> <div id="layout"> <div id="left">Left</div> <div id="right">Right</div> </div> </body> </html> [...]