首页 > 开发 > CSS > 正文

css定义导致图片循环错位的问题

2024-07-11 08:24:11
字体:
来源:转载
供稿:网友

问题:在这里“快乐成长”栏目中的图片css应该怎么写?一开始写好了,但加文章的时候就乱了。

解决:看您网站的源代码:

<ul><li><div class="pe_u_thumb"><a href="/Item/1717.aspx"><img class="pic2" src="/UploadFiles/KLCZ/2008/4/200804191232104419.jpg" border="0" /></a></div><div class="pe_u_thumb_title"><a href="/Item/1717.aspx">彭妍妍:</a></div><div class="pe_u_thumb_title_2" /></li>

<li><div class="pe_u_thumb"><a href="/Item/1716.aspx"><img class="pic2" src="/UploadFiles/KLCZ/2008/4/200804191232104419.jpg" border="0" /></a></div><div class="pe_u_thumb_title"><a href="/Item/1716.aspx">彭妍妍:</a></div><div class="pe_u_thumb_title_2" /></li>

……

  您这里是利用li的宽度控制来实现图片左右排列循环的,但是,li在高度上有差异时,就会出现上述图片中错位的现象(如您现在的标题中的文字“彭妍妍:”与“11111111”的高度在浏览器中解析就会有差异)。

  因此,解决您的问题很简单,只要使浏览器让循环的li解析出相同的高度即可。您可以用下面的方法解决您的问题:

  1、可以定义控制标题的CSS“pe_u_thumb_title”有相同的高度。

  2、可以定义li有相同的高度。

  如:

.pe_u_thumb_title{
height: auto !important;
height: 24px;
min-height: 24px;
}

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表