如何在文字的右上角放置图像？

Question

我正在尝试使用CSS制作类似的东西。

这就是它的结果。

这是我的代码。

<div class="info_1"><img src="images/xe_icon_2.png"><span>Powered by XE</span></div>

现在，我确实给了一些CSS样式。

.info_1 {
   display: inline;
   clear:right;
}

.info_1 span{
   font-size: 20px;
   line-height: 100px;
}

我需要在图像的右上方显示哪些文字？

Answer 1

如何将它放在图像之前：

<div class="info_1">
    <span>Powered by XE</span>
    <img src="images/xe_icon_2.png">
</div>

并稍微修改CSS（你不需要那个行高）。

或者，您可以保留当前标记，并使该范围绝对定位，然后使用top和right CSS规则对其位置进行微调。

以下是一个例子：

#ctn {
  width: 300px;
  background: #eee;
  position: relative;
  box-shadow: 0px 0px 12px #aaa;
}
.info_1 {
  display: inline;
  clear: right;
}
.info_1 span {
  font-size: 20px;
  position: absolute;
  top: 16px;
  right: 10px;
}
.info_1 img {
  margin: 20px 4px;
}

<div id="ctn">
  <div class="info_1">
    <span>Powered by XE</span>
    <img src="https://placehold.it/150x150">
  </div>
</div>

更新

#main {
  width: 600px;
  background: #eee;
}
#ctn {
  width: 300px;
  margin: auto;
  position: relative;
  background: #999;
}
.info_1 span {
  font-size: 20px;
  position: absolute;
  top: 16px;
  right: 10px;
}
.info_1 img {
  margin: 20px 4px;
}

<div id="main">
  <div id="ctn">
    <div class="info_1">
      <span>Powered by XE</span>
      <img src="https://placehold.it/150x150">
    </div>
  </div>
</div>