css

Question

我在一个模板中的h6下面有一个img，而且我有这个模板的多个外观。

h6 大小可以是 1 行、两行等。至于现在我有这样的 img css：

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

问题显然是，如果 h6 大小在其中一个模板中为 2 行，而在其他模板中为 1 行，则 img 将不会处于同一高度。

无论 h6 大小如何，我怎样才能将 img 放置在固定位置？

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 总是位于容器的底部。

css - 在 h6 下放置不受 h6 大小影响的 img