假设某个img的css是这样的:
img {
top: 100px;
}
然后图片有300px的样子,大概就是这样的:
+-------------------+
| |
| +------+ |
| | img | |
| +------+ |
+-------------------+
如果我想以图片的底部为基准线对齐的话,希望它呈现下面这个样子,CSS可以实现么?
+------+
+-------------------+
| | img | |
| +------+ |
| |
| |
+-------------------+
当然,一个比较笨得方法就是用top
-img
的width
,但是更好地写法么?
将<span class="inner">
和<img>
写进同一个<span class="outer">
(行内元素均可),然后
span.inner {
position: absolute;
bottom: -100px;
}
<div class="outside">
<img>
</div>
外面的那个框就叫outside,里面是img .
.outside {
position: relative;
}
.outside img {
position: absolute;
top: -10px;
}
这样,里面的img就会相对于.outside,做绝对定位。