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=