如何將該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;
}