如何将相对定位div对齐到容器右侧？WordPress页面构建求助

我使用WordPress页面构建器搭建了一个两列布局页面（左列展示图片、右列展示文本），已通过自定义CSS为图片添加了偏移边框，代码如下：

.home-feature {
  display: inline-block;
  position: relative;
}

.home-feature::before {
  position: absolute;
  top: 5%;
  left: 10%;
  width: 100%;
  height: 100%;
  border: 2px solid #F2C287;
  border-radius: 600px 600px 0 0;
  content: '';
  z-index: 1;
}

现在希望将图片对齐到左列的右侧，使其贴近文本，不想通过为列添加内边距的方式实现，求更简洁规范的CSS方案。

方案1：利用margin-left:auto实现右对齐 #

直接给图片容器添加margin-left: auto，借助其inline-block特性，自动在父容器内占据剩余空间，从而右对齐：

.home-feature {
  display: inline-block;
  position: relative;
  margin-left: auto;
}

.home-feature::before {
  position: absolute;
  top: 5%;
  left: 10%;
  width: 100%;
  height: 100%;
  border: 2px solid #F2C287;
  border-radius: 600px 600px 0 0;
  content: '';
  z-index: 1;
}

方案2：通过flex布局控制父容器 #

如果左列容器支持自定义CSS，给父容器设置flex布局并指定右对齐，无需修改图片容器样式：

/* 替换为左列实际的类名，比如页面构建器生成的列类 */
.left-column {
  display: flex;
  justify-content: flex-end;
}

这种方式符合现代布局规范，仅通过控制父容器就能实现对齐效果。

方案3：绝对定位实现（需父容器为相对定位） #

若左列容器已设置position: relative，可给图片容器设置绝对定位固定到右侧：

.home-feature {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%); /* 可选，实现垂直居中 */
}

.home-feature::before {
  position: absolute;
  top: 5%;
  left: 10%;
  width: 100%;
  height: 100%;
  border: 2px solid #F2C287;
  border-radius: 600px 600px 0 0;
  content: '';
  z-index: 1;
}

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