如何在文本下方放置装饰图片？实现椭圆图片的指定布局

一、在文本下方添加装饰图片 #

直接把装饰图片的<img>标签放到段落<p>的末尾即可，修改后的完整HTML代码如下：

<div class="event-main-container"> 
  <div class="firstContent">
    <img src="IMG ASSETS/Ellipse 6.png" class="ellipse-img">
    <h3>Events</h3>
    <p>
      If we're gonna walk though the <br> woods, we need a little path. We'll <br> paint
      one happy little tree right here. <br />
      There's not a thing in the world wrong <br> with washing your brush. Don't
      fiddle <br> with it all day.
    </p>
    <!-- 新增底部装饰图，替换路径为你的装饰图地址 -->
    <img src="你的装饰图路径" class="decorative-img">
  </div>
</div>

二、椭圆图片按目标样式定位 #

利用CSS的相对定位+绝对定位组合实现，先给父容器设置相对定位作为参照，再给椭圆图设置绝对定位调整位置，示例CSS代码如下：

/* 给父容器设置相对定位，作为椭圆图的定位基准 */
.firstContent {
  position: relative;
  /* 预留顶部内边距，避免文字被椭圆图遮挡 */
  padding-top: 50px;
}

/* 椭圆图的定位样式，可根据目标效果调整数值 */
.ellipse-img {
  position: absolute;
  top: 10px; /* 距离父容器顶部的距离 */
  left: 15px; /* 距离父容器左侧的距离 */
  width: 70px; /* 椭圆图宽度 */
  height: 70px; /* 椭圆图高度 */
  /* 若需要椭圆图在文字下方，添加z-index: -1; 反之则去掉 */
  z-index: -1;
}

/* 可选：给底部装饰图添加样式，比如居中、设置间距 */
.decorative-img {
  margin-top: 25px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%; /* 按需调整装饰图宽度 */
}

你可以根据实际显示效果，微调top、left、width等属性值，直到完全匹配目标样式。

内容的提问来源于stack exchange，提问作者sleepingemu