css - 在h6下定位img，不受h6大小的影响

Question

我在模板中img下有一个h6，我有多次出现此模板。

h6大小可以是1行，2行等。至于现在我有img css那样：

ul.hourly li img {
    padding-top: 20px;
}

问题显然是如果h6尺寸在其中一个模板中是2行而在其他模板上是1行，则img将不会在同一高度上

无论img大小是什么，我怎样才能使用固定位置h6？

Answer 1

您可以在同一个容器中同时添加h6和img，并为其position: relative，并根据该位置定位img：

<div class="container">
   <h6>My title</h6>
   <img src="image.png"/>
</div>

CSS：

.container {
   position: relative;
}

.container img {
   position: absolute;
   top: 100%;
}

因此，img始终位于容器的底部。