css ul li 图片文字混排，css完美版,jquery只适合宽高相等的情况

touchinsert

浏览: 1287630 次
性别:
来自: 北京

最近访客更多访客>>

yin_bp

u012363178

wangyy

dongguangming88

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1629)

社区版块

存档分类

2012-01 ( 61)
2011-12 ( 68)
2011-11 ( 26)
更多存档...

</head>
<body>
<ul class="k_img_ul">
<li><span><a href="#"><img src="5.jpg" /></a></span><p>king</p></li>
<li><span><a href="#"><img src="QQ截图未命名.jpg" /></a></span><p>king</p></li>
<li><span><a href="#"><img src="1.jpg" /></a></span><p>king</p></li>
<li><span><a href="#"><img src="5.jpg" /></a></span><p>king</p></li>

<br class="clear" />
</ul>

</body>
</html>

效果图如下：

//函数传入参数为img元素，和对于图片宽高的要求，这里是宽高一致的情况
function makeMid(classNmae,widthAndHeight){
var h=classNmae.height();//24
var w=classNmae.width();//508
// alert(h+"h"+w+"w");
if((h<widthAndHeight)&&(w>widthAndHeight))//当高度小于53而宽度大于53 时
{

// var x=(widthAndHeight*h)/w;
// alert(x);//2.5
var marginT=Math.round(widthAndHeight/2-h/2);
// alert(marginT);
marginT=(marginT)+"px 0 0 0";
classNmae.css({width:widthAndHeight,height:h,margin:marginT});//设置图片元素的 CSS,宽为53,高为图片原来的高，margin为(53/2-图片原高度/2)
}
}

window.onload=function(){
/// alert("img:"+$("#k_img_ul>li>span>a>img").length);
var count=$("#k_img_ul>li>span>a>img").length;//找到要检测的图片个数
// for(var i=0;i<count;i++)//这个for循环没有必要，each就是循环

// {
alert(i);
$("#k_img_ul>li>span>a>img").each (function(){
makeMid($(this),Number(53));

});

// }
}

});

当加入这段jquery后，效果如下：

***************************************************无需边框版******************************************************

<!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>
<title>Untitled Page</title>
<link href="s_common.css" type="text/css" rel="Stylesheet" />
<style type="text/css">

.k_img_ul{ float:left; width:320px; padding:18px 0 0 0; }
.k_img_ul li{ float:left; width:57px; padding:0 5px; text-align:center;}
.k_img_ul li a{ display:block; width:53px; height:53px; overflow:hidden; }
.k_img_ul li a img{ width:53px;}
.k_img_ul p{ height:24px; line-height:24px;}

</style>
</head>
<body>
<ul class="k_img_ul">
<li><a href="#"><img src="5.jpg" /></a><p>king</p></li>
<li><a href="#"><img src="QQ截图未命名.jpg" /></a><p>king</p></li>
<li><a href="#"><img src="1.jpg" /></a><p>king</p></li>
<li><a href="#"><img src="5.jpg" /></a><p>king</p></li>

<br class="clear" />
</ul>

</body>
</html>