html插入图片在标题左侧,html-向内联>图片添加文本标题

我想我有使用纯CSS(无Javascript)方法的情况：demo page

在您的第一个列表项中,我插入了一个div：

div.caption {

width:200px; /* Because your images are 200px wide, this must match */

clear:both; /* This places the div after the floated image */

position:relative; /* Required to set positioning on the line below */

top:-100px; /* The div would normally appear at the bottom of the image. Move it up a little. */

margin-bottom:-500px; /* A hack because the div causes the li to have a larger bottom margin. Not sure how to get around this */

z-index:2 /* Will explain this later */

}

...

The quick brown fox jumped over the lazy dog

我在您的li / a / img元素中添加了z-index属性：

#work ul li, #work ul li a, #work ul li a img {

position: relative; /* z-index only works on positioned elements */

z-index: 1; /* Default z-index 1 */

display: block;

float: left;

}

#work ul li a:hover, #work ul li a:active {

position: relative; /* Hover/active z-index 3 */

z-index: 3;

}

如果您不熟悉z-index,请看看如何使用它.在测试页上,标题div的z索引比常规图像高,但z索引比鼠标悬停的图像低.

这有点hacky,但仍有改进的空间.同样,仅供参考,您的页面在IE 7中显示不正确-所有图像都显示在单个列中.如果修复标记后,我的代码可能不需要这些技巧. =)