在网页设计中,经常会遇到图片和文字并列展示的情况。为了更好地展示图片和方便用户阅读文字信息,我们通常需要将文字放置在图片的下方。那么在CSS中,我们该如何实现这一功能呢?首先,在HTML中,我们需要使...
在网页设计中,经常会遇到图片和文字并列展示的情况。为了更好地展示图片和方便用户阅读文字信息,我们通常需要将文字放置在图片的下方。那么在CSS中,我们该如何实现这一功能呢?
首先,在HTML中,我们需要使用一个包裹图片和文字的容器元素,比如div标签。在这个容器元素中,分别放置图片和文字。代码如下所示:
<div class="wrapper">
<img src="image.png" class="img">
<p class="content">这是一段文字信息。</p>
</div>
.wrapper {
position: relative;
}
.content {
position: absolute;
bottom: 0;
}
.img {
height: 100%;
}
<div class="wrapper">
<img src="image.png" class="img">
<p class="content">这是一段文字信息。</p>
</div>
.wrapper {
position: relative;
}
.content {
position: absolute;
bottom: 0;
}
.img {
height: 100%;
}