CSS可以实现以图片底部为基准线定位吗？

Question

假设某个img的css是这样的：

img {
  top: 100px;
}

然后图片有300px的样子，大概就是这样的：

+-------------------+
|                   |
|   +------+        |
|   | img  |        |
|   +------+        |
+-------------------+

如果我想以图片的底部为基准线对齐的话，希望它呈现下面这个样子，CSS可以实现么？

    +------+
+-------------------+
|   | img  |        |
|   +------+        |
|                   |
|                   |
+-------------------+

当然，一个比较笨得方法就是用top-img的width，但是更好地写法么？

Answer 1

将<span class="inner">和<img>写进同一个<span class="outer">(行内元素均可)，然后

span.inner {
    position: absolute;
    bottom: -100px;
}

Answer 2

<div class="outside">
    <img>
</div>

外面的那个框就叫outside,里面是img .

.outside {
    position: relative;
}
.outside img {
    position: absolute; 
    top: -10px;
}

这样，里面的img就会相对于.outside，做绝对定位。