Question

div+css图片排版总是出现错乱！

如图所示。请问是哪里不对？该如何解决呢？

网页部分代码如下：
<div id="left_2">
<div class="global_sub">{:$thiscate[catename]}</div>
<div class="pic_no_top">
<!-- $msglist AS $key=>$value -->
<ul>
<li>
<p>
<a href="msg.php?id={:$value[id]}" title="{:$value[subject]}"><img src="{:$value[folder]}{:$value[thumbfile]}" border="0"></a>
</p>
<p><a href="msg.php?id={:$value[id]}">{:$value[cut_subject]}</a></p>
</li>
</ul>
<!-- end -->
</div>
</div>

css相关部分代码如下：

#left_2
{
float:right;
width:732px;
padding-top:8px;
}
.global_sub
{
height:24px;/*FireFox*/
*height:27px;/*IE*/
background:url("notice_n.gif") repeat-x;
padding-top:4px;
padding-left:15px;
border-left:1px #FFD862 solid;
border-right:1px #FFD862 solid;
text-align:left;
}
.pic_no_top
{
background-color:#86BBE3;
border:1px #FFD862 solid;
border-top:none;
text-align:left;
}
.pic_no_top
{
clear:both;
overflow:hidden;
}
.pic_no_top ul
{
list-style-type:none;
margin:0px;
}
.pic_no_top ul li
{
float:left;
width:20%;
padding-top:9px;
text-align:center;
}
.pic_no_top ul li img
{
width:110px;
height:110px;
text-align:center;

小弟菜鸟，诚心求教，不胜感激~！

Answer 1

你这个怕是宽度不够，你如果总宽度不够，那么就不出现这样问题，你是在什么浏览器下测试的，我看你的CSS，UL没给宽度，pic_no_top这个也没给宽度，还有你看看你浮动哪里出错，你想要能定死，你就要给出相应的宽度，现在你这个浮动不是根据pic_no_top的宽度来浮动，是根据left_2的宽度来浮动,所以他浮动是跳跃级的.他没找到ul和父DIV的宽度,所以会出错,你要把所有的宽度都给对了,他才不会出错,你pdding了的地方记得要减去padding的像素,比如你高度是100px,你padding-top:20px;你里面装了60px的东西,你的高度这个时候就应该是80px;要不然你不减去你的padding的像素,那么你的高度就变成120px;了,那么你和其他的就不平行,就会出错了,宽度也是一样的,记得减去,那才是你真正要的宽度或高度像素. 你实在调试不出来，你留个QQ，我看看我能不能帮你解决

Answer 2

像这种排版最好都给定宽度，稍微多一点都会出现错乱的