<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.miao_left{float:left; width:700px; overflow:hidden; padding-right:12px; border-right:#dfdfdf solid 1px; background-color:#FFFFFF; text-align:left; }
.miao_left ul{width:700px; margin:0 auto; padding:0; overflow:hidden;}
.miao_left ul li{width:300px; padding-left:20px; padding-right:15px; padding-top:10px; float:left; padding-bottom:5px; margin:0 auto; overflow:hidden; }
.miao_left ul li .miao_l_tit{font-size:13px; font-weight:bold; text-align:center; width:300px; padding:5px 0 5px 0; color:#3d9bde;}
.miao_left ul li .miao_l_tit a{color:#048;}
.miao_left ul li .miao_l_tit a:hover{color:#08c;}
.miao_left ul li .miao_l_img{width:300px; text-align:center; padding:0; margin:0 auto; padding-top:5px;}
.miao_left ul li .miao_l_img img{width:265px; height:175px; border:0px;}
.miao_left ul li .miao_l_img a:link {border:5px #CCCCCC solid; text-decoration:none; width:265px; height:175px; display:block; margin-left:15px;}
.miao_left ul li .miao_l_img a:visited {border:5px #CCCCCC solid; text-decoration:none; width:265px; height:175px; display:block; margin-left:15px;}
.miao_left ul li .miao_l_img a:hover{border:5px #999999 solid; width:265px; height:175px; display:block; margin-left:15px;}
</style>
</head>
<body>
<div class="miao_left">
<ul>
<li>
<div class="miao_l_img"><a href="/Item/13.aspx" target="_blank"><img src="" border="0"></a></div>
<div class="miao_l_tit"><a href="/Item/13.aspx" target="_blank">基于JavaScript开发的日期选择控件</a></div>
</li>
<li>
<div class="miao_l_img"><a href="/Item/11.aspx" target="_blank"><img src="" border="0"></a></div>
<div class="miao_l_tit"><a href="/Item/11.aspx" target="_blank">文字导航实例一（垂直一列式） </a></div>
</li>
<li>
<div class="miao_l_img"><a href="/Item/10.aspx" target="_blank"><img src="" border="0"></a></div>
<div class="miao_l_tit"><a href="/Item/10.aspx" target="_blank">圆形图形按钮css样式</a></div>
</li>
<li>
<div class="miao_l_img"><a href="/Item/9.aspx" target="_blank"><img src="" border="0"></a></div>
<div class="miao_l_tit"><a href="/Item/9.aspx" target="_blank">非常简单的文字变色导航（垂直一列式）</a></div>
</li>
<li>
<div class="miao_l_img"><a href="/Item/7.aspx" target="_blank"><img src="" border="0"></a></div>
<div class="miao_l_tit"><a href="/Item/7.aspx" target="_blank">Jewellery.me在线珠宝店</a></div>
</li>
<li>
<div class="miao_l_img"><a href="/Item/6.aspx" target="_blank"><img src="" border="0"></a></div>
<div class="miao_l_tit"><a href="/Item/6.aspx" target="_blank">一个水平Tab风格的折叠控件</a></div>
</li>
<li>
<div class="miao_l_img"><a href="/Item/5.aspx" target="_blank"><img src="" border="0"></a></div>
<div class="miao_l_tit"><a href="/Item/5.aspx" target="_blank">纵向Tab风格的左右折叠控件</a></div>
</li>
<li>
<div class="miao_l_img"><a href="/Item/8.aspx" target="_blank"><img src="" border="0"></a></div>
<div class="miao_l_tit"><a href="/Item/8.aspx" target="_blank">一款使用jquery改变背景图横向折叠翻盘效果</a></div>
</li>
<li>
<div class="miao_l_img"><a href="/Item/3.aspx" target="_blank"><img src="" border="0"></a></div>
<div class="miao_l_tit"><a href="/Item/3.aspx" target="_blank">一款使用jquery改变背景图横向折叠翻盘效果</a></div>
</li>
<li>
<div class="miao_l_img"><a href="/Item/2.aspx" target="_blank"><img src="" border="0"></a></div>
<div class="miao_l_tit"><a href="/Item/2.aspx" target="_blank">跨浏览器的左边飞出菜单（切换背景色）</a></div>
</li>
</ul>
</div>
</body>
</html>
我想要的效果是两列，一行显示2条，头一行没有问题，但第二就出问题了，只靠右边显示了一条，第三行又没事了，我用的是li里套div，我没有查出是哪里出的问题，希望高手帮忙下，运行上面的代码可以看到效果。在ie8和火狐下没问题，但在ie6，ie7下就出现上述的问题。
5 个解决方案
#1
.miao_left ul li{width:300px; padding-left:20px; padding-right:15px; padding-top:10px; float:left; padding-bottom:5px; margin:0 auto; overflow:hidden; }
给个高度
原因不是很清楚
给个高度
原因不是很清楚
#2
下面我只是改了图片标题，其他CSS没改，也可以正常的
<!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=utf-8" />
<style>
.miao_left{float:left; width:700px; overflow:hidden; padding-right:12px; border-right:#dfdfdf solid 1px; background-color:#FFFFFF; text-align:left; }
.miao_left ul{width:700px; margin:0 auto; padding:0; overflow:hidden;}
.miao_left ul li{width:300px; padding-left:20px; padding-right:15px; margin-top:10px; float:left; margin-bottom:5px; margin:0 auto; overflow:hidden; }
.miao_left ul li .miao_l_tit{font-size:13px; font-weight:bold; text-align:center; width:300px; padding:5px 0 5px 0; color:#3d9bde;}
.miao_left ul li .miao_l_tit a{color:#048;}
.miao_left ul li .miao_l_tit a:hover{color:#08c;}
.miao_left ul li .miao_l_img{width:300px; text-align:center; padding:0; margin:0 auto; padding-top:5px;}
.miao_left ul li .miao_l_img img{width:265px; height:175px; border:0px;}
.miao_left ul li .miao_l_img a:link {border:5px #CCCCCC solid; text-decoration:none; width:265px; height:175px; display:block; margin-left:15px;}
.miao_left ul li .miao_l_img a:visited {border:5px #CCCCCC solid; text-decoration:none; width:265px; height:175px; display:block; margin-left:15px;}
.miao_left ul li .miao_l_img a:hover{border:5px #999999 solid; width:265px; height:175px; display:block; margin-left:15px;}
</style>
</head>
<body>
<div class="miao_left">
<ul>
<li>
<div class="miao_l_img"> <a href="/Item/13.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/13.aspx" target="_blank">1</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/11.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/11.aspx" target="_blank">2</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/10.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/10.aspx" target="_blank">3</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/9.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/9.aspx" target="_blank">4</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/7.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/7.aspx" target="_blank">5</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/6.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/6.aspx" target="_blank">6</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/5.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/5.aspx" target="_blank">7</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/8.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/8.aspx" target="_blank">8</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/3.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/3.aspx" target="_blank">9</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/2.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/2.aspx" target="_blank">10</a> </div>
</li>
</ul>
</div>
</body>
</html>
#3
没看代码，我改了编码没发现什么异常..................可能是编码不同，占据空间不同，导致下面的不能正常排列~~
#4
设定字体和行高
给li设定高度
给li设定高度
#5
最保障做法设置高度，多出才会被隐藏
#1
.miao_left ul li{width:300px; padding-left:20px; padding-right:15px; padding-top:10px; float:left; padding-bottom:5px; margin:0 auto; overflow:hidden; }
给个高度
原因不是很清楚
给个高度
原因不是很清楚
#2
下面我只是改了图片标题，其他CSS没改，也可以正常的
<!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=utf-8" />
<style>
.miao_left{float:left; width:700px; overflow:hidden; padding-right:12px; border-right:#dfdfdf solid 1px; background-color:#FFFFFF; text-align:left; }
.miao_left ul{width:700px; margin:0 auto; padding:0; overflow:hidden;}
.miao_left ul li{width:300px; padding-left:20px; padding-right:15px; margin-top:10px; float:left; margin-bottom:5px; margin:0 auto; overflow:hidden; }
.miao_left ul li .miao_l_tit{font-size:13px; font-weight:bold; text-align:center; width:300px; padding:5px 0 5px 0; color:#3d9bde;}
.miao_left ul li .miao_l_tit a{color:#048;}
.miao_left ul li .miao_l_tit a:hover{color:#08c;}
.miao_left ul li .miao_l_img{width:300px; text-align:center; padding:0; margin:0 auto; padding-top:5px;}
.miao_left ul li .miao_l_img img{width:265px; height:175px; border:0px;}
.miao_left ul li .miao_l_img a:link {border:5px #CCCCCC solid; text-decoration:none; width:265px; height:175px; display:block; margin-left:15px;}
.miao_left ul li .miao_l_img a:visited {border:5px #CCCCCC solid; text-decoration:none; width:265px; height:175px; display:block; margin-left:15px;}
.miao_left ul li .miao_l_img a:hover{border:5px #999999 solid; width:265px; height:175px; display:block; margin-left:15px;}
</style>
</head>
<body>
<div class="miao_left">
<ul>
<li>
<div class="miao_l_img"> <a href="/Item/13.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/13.aspx" target="_blank">1</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/11.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/11.aspx" target="_blank">2</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/10.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/10.aspx" target="_blank">3</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/9.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/9.aspx" target="_blank">4</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/7.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/7.aspx" target="_blank">5</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/6.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/6.aspx" target="_blank">6</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/5.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/5.aspx" target="_blank">7</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/8.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/8.aspx" target="_blank">8</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/3.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/3.aspx" target="_blank">9</a> </div>
</li>
<li>
<div class="miao_l_img"> <a href="/Item/2.aspx" target="_blank"> <img src="" border="0"> </a> </div>
<div class="miao_l_tit"> <a href="/Item/2.aspx" target="_blank">10</a> </div>
</li>
</ul>
</div>
</body>
</html>
#3
没看代码，我改了编码没发现什么异常..................可能是编码不同，占据空间不同，导致下面的不能正常排列~~
#4
设定字体和行高
给li设定高度
给li设定高度
#5
最保障做法设置高度，多出才会被隐藏