如何将此Wordpress图像标题与图像顶部对齐？

Question

我正在写一个Wordpress主题。我想在主题中添加到我的图像中的字幕被拉到图像的左侧并与图像的顶部对齐，如下图所示：

Wordpress的HTML输出如下所示（为简洁起见，简化了）：

<div id="attachment_1726" style="width: 1034px" class="wp-caption aligncenter">
   <a href="some_url"><img class="wp-image-1726 size-large" src="the_src" width="1024" height="640"></a>
   <p class="wp-caption-text">Satoshi town, the trading capital of BitQuest</p>
</div>

我无法弄清楚如何拉出wp-caption-text段。我尝试了以下方法：

.wp-caption-text {
  position: relative;
  left: -170px;
  top: 0;
  width: 150px;
}

但这不起作用。结果如下：

有人能指出我正确的方向吗？

Answer 1

你必须浮动这两个元素。也可以申请vertical-align: top;

.wrapper {
  width: 450px;
}
p,
img {
  float: left;
}
p {
  margin: 0;
  width: 100px;
}

<div class="wrapper">

  <p>Satoshi town, the trading capital of BitQuest</p>
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" />
</div>

Answer 2

尝试将其显示为内联块：

.wp-caption-text {
  position: absolute;
  display: inline-block;
  left: -170px;
  top: 0;
  width: 150px;
}