css布局总是发生错位现象，该如何解决？？谢谢！！急！！
效果如下面链接中的图片：
http://tttycleaner.com/1.gif
三行三列的图片总是不能保持三行三列，总是发生错位，麻烦大家该如何解决呢？？
是因为什么导致这个问题呢？？
css文件：
#ttty_content2{
width:774px;
/*height:230px;*/
margin:0px;
background:#FFF;
padding:0px;
border-left:1px solid #360;
border-right:1px solid #360;
}
#ttty_content2_left{ /*第二块内容－－左部显示*/
float:left;
clear:right;
/*width:29%;*/
width:223px;
/*height:220px;*/
margin:0px;
background:#FFF;
padding:0px;
border-right:1px solid #360;
}
#ttty_content2_middle{ /*第二块内容－－中部显示*/
float:left;
width:45%;
/*width:350px;*/
/*height:450px;*/
margin:0px;
padding:0px;
border-right:1px solid #360;
}
#ttty_content2_right{ /*第二块内容－－右部显示*/
float:left;
clear:right;
/*width:23%;*/
width:200px;
/*height:200px;*/
margin:0px;
padding:0px;
}
html文件：
<div id= "ttty_content2_middle ">
<span class= "ttty_content1_at "> <span class= "ttty_content2_jptj "> </span> </span>
<ul>
<li> <img src= "jingpin_img/1.gif " width= "100 " height= "100 " border= "1 " alt= "移动垃圾桶 " /> </a> </li>
<li> <img src= "jingpin_img/2.gif " width= "100 " height= "100 " border= "1 " alt= "移动垃圾桶 " /> </a> </li>
<li> <img src= "jingpin_img/3.gif " width= "100 " height= "100 " border= "1 " alt= "移动垃圾桶 " /> </a> </li>
<li> <img src= "jingpin_img/4.gif " width= "100 " height= "100 " border= "1 " alt= "垃圾屋 " /> </a> </li>
<li> <img src= "jingpin_img/5.gif " width= "100 " height= "100 " border= "1 " alt= "垃圾屋 " /> </a> </li>
<li> <img src= "jingpin_img/6.gif " width= "100 " height= "100 " border= "1 " alt= "垃圾屋 " /> </a> </li>
<li> <img src= "jingpin_img/7.gif " width= "100 " height= "100 " border= "1 " alt= "保洁三轮车 " /> </a> </li>
<li> <img src= "jingpin_img/8.gif " width= "100 " height= "100 " border= "1 " alt= "保洁三轮车 " /> </a> </li>
<li> <img src= "jingpin_img/9.gif " width= "100 " height= "100 " border= "1 " alt= "保洁三轮车 " /> </a> </li>
<li> <img src= "jingpin_img/10.gif " width= "100 " height= "100 " border= "1 " alt= " " /> </li>
<li> <img src= "jingpin_img/11.gif " width= "100 " height= "100 " border= "1 " alt= " " /> </li>
<li> <img src= "jingpin_img/12.gif " width= "100 " height= "100 " border= "1 " alt= " " /> </li>
</ul>
</div>
[解决办法]
#XX li { float:left;list-style:none;}
另外UL的宽度要设成三个LI的宽度，这样就行了。
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
<style>
*{ margin:0;padding:0;}
#ttty_content2_middle{ width:330px;height:500px;}
#ttty_content2_middle p { width;102px;height:102px;padding:4px;float:left;}
#ttty_content2_middle p img{ width:100px;height:100px;border:1px solid #000;display:block;} </style>
</head>
<body>
<div id= "ttty_content2_middle ">
<p> <a> <img src= "jingpin_img/1.gif " alt= "移动垃圾桶 " /> </a> </p>
<p> <a> <img src= "jingpin_img/2.gif " alt= "移动垃圾桶 " /> </a> </p>
<p> <a> <img src= "jingpin_img/3.gif " alt= "移动垃圾桶 " /> </a> </p>
<p> <a> <img src= "jingpin_img/4.gif " alt= "垃圾屋 " /> </a> </p>
<p> <a> <img src= "jingpin_img/5.gif " alt= "垃圾屋 " /> </a> </p>
<p> <a> <img src= "jingpin_img/6.gif " alt= "垃圾屋 " /> </a> </p>
<p> <a> <img src= "jingpin_img/7.gif " alt= "保洁三轮车 " /> </a> </p>
<p> <a> <img src= "jingpin_img/8.gif " alt= "保洁三轮车 " /> </a> </p>
<p> <a> <img src= "jingpin_img/9.gif " alt= "保洁三轮车 " /> </a> </p>
<p> <a> <img src= "jingpin_img/10.gif " alt= " " /> </a> </p>
<p> <a> <img src= "jingpin_img/11.gif " alt= " " /> </a> </p>
<p> <a> <img src= "jingpin_img/12.gif " alt= " " /> </a> </p>
</div>
</body>
</html>
[解决办法]
<!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=gb2312" /><title>test</title><style type="text/css">#test { width:350px; overflow:hidden;} #test ul { margin:0; padding:0; list-style:none;}#test ul li { float:left; margin:0 3px; padding:5px 0; border-bottom:1px dashed #ddd;}#test img { border:1px solid #000; vertical-align:top;}</style></head><body><div id="test"> <ul> <li><img src="http://tttycleaner.com/jingpin_img/1.gif" alt="移动垃圾桶" /></li> <li><img src="http://tttycleaner.com/jingpin_img/2.gif" alt="移动垃圾桶" /></li> <li><img src="http://tttycleaner.com/jingpin_img/3.gif" alt="移动垃圾桶" /></li> <li><img src="http://tttycleaner.com/jingpin_img/4.gif" alt="垃圾屋" /></li> <li><img src="http://tttycleaner.com/jingpin_img/5.gif" alt="垃圾屋" /></li> <li><img src="http://tttycleaner.com/jingpin_img/6.gif" alt="垃圾屋" /></li> <li><img src="http://tttycleaner.com/jingpin_img/7.gif" alt="保洁三轮车" /></li> <li><img src="http://tttycleaner.com/jingpin_img/8.gif" alt="保洁三轮车" /></li> <li><img src="http://tttycleaner.com/jingpin_img/9.gif" alt="保洁三轮车" /></li> <li><img src="http://tttycleaner.com/jingpin_img/10.gif" alt="垃圾屋" /></li> <li><img src="http://tttycleaner.com/jingpin_img/11.gif" alt="垃圾屋" /></li> <li><img src="http://tttycleaner.com/jingpin_img/12.gif" alt="垃圾屋" /></li> </ul> </div> </body></html>
[解决办法]
顶一下, 马上看
[解决办法]
<li>最好固定高度，不然的话哪个图片稍微高1px，后面的就会错位