如何在图像底部左下方浮动div？

Question

我需要在左下角的图像上浮动一个div。

我正在敲打这个。我确信这很简单，但我无法理解。

这是我设法得到的。

http://jsfiddle.net/pauleh/6GXFK/

.group li{
    border: 1px solid red;
    display: inline-block;
    list-style-type: none;  
}
.group li img {
    display: block;
}
.group li span {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 0 25px;
    border-color: transparent transparent transparent #ff0000;
    float: left;
}

HTML

<div class="group">
    <ul>
       <li><img src="http://placehold.it/196x155"/><span></span></li>
       <li><img src="http://placehold.it/196x155"/><span></span></li>
       <li><img src="http://placehold.it/196x155"/><span></span></li>
    </ul>
</div>

Answer 1

没有必要漂浮。使用定位。跨度变为绝对值，左侧和下侧设置为零。然后父母李得到亲戚：

.group li {
    border: 1px solid red;
    display: inline-block;
    list-style-type: none;
    position:relative;
}
.group li img {
    display: block;
}
.group li span {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 0 25px;
    border-color: transparent transparent transparent #ff0000;
    position:absolute;
    left:0;
    bottom:0;
}

<强> jsFiddle example