Question

css中 li设置了图片最大宽度后，如何让span叠加在li里面的图片底部

<ul>
<li><img src="bbb.jpg"><span class="titile">标题2222</span></li>
<li><img src="aaa.jpg"><span class="titile">标题1111</span></li>

</ul>
css：
li{float:left;width:180px;height:200px;overflow:hidden;}
li img{max-width:200px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<200?"200px":"");}

li的宽是180px的 图片最大是200px的，溢出隐藏

我现在想让title叠加在li的图片底部，不知道怎么设置
.title{margin-top:-20;}

因为图片高度是不固定的 所以直接“margin-top:-20;” 那么文字就跑到li外面了，因为溢出部分虽然隐藏了。但是margin-top貌似忽略隐藏这部分

Answer 1

你这个从设计角度上来说就是不太合理的，LI的高度固定了，但图片的高度不固定，万一图片的高度为220，那图片底部的文字就看不见了，因为溢出隐藏了，如果用定位来做的话正常情况下是在底部，但同样图片很高的时候文字盖在图片上面，又不美观，如果说图片的高度虽然不固定，但永远都不会超过180，那完全可以给span设置display-block;，但这样实际上也不是很合理，因为这样图片的文字也会随着图片的高度忽高忽低，这样就不好看了

追问

此题无解 图片都不固定 高宽比也不懂 所以只能取舍

li的大小180x200 所以为了避免li因图片的高宽比差异太大，而出现空白
所以我才让图片的最大值>li的，然后溢出隐藏
如果按你说的 图片max-height=180 那么有可能会出现图片的width<180px

关键我li的float=left，并且我不想要图片与图片之间出现缝隙
所以才会有这样的问题！

Answer 2

.title{
postion:absolute;
bottom:0px;

left:0px;

}

ul li{
postition:relative;

}

这样就好了。

追问

不行！

追答

.title{
position:absolute;
bottom:0px;
left:0px;
display:block;

}
ul li{
postition:relative;
}

Answer 3

将图片和span的display都设为block就可以了。