html - 图片前的文字

Question

我是整个行业的新手，我有一个小问题。我尝试将文本 (h3) 放在图像之前，但无论我多么努力，它都不起作用，

我需要一些帮助:)

这是我尝试过的，此外还尝试更改显示和位置但没有任何帮助。

.prosc {
  position: relative;
  line-height: 4px;
}

.mo {
  position: relative;
  display: inline-block;
  top: -50px;
  right: 0;
  bottom: 0;
}

h3 {
  font-family: 'Cabin', sans-serif;
  font-size: 2.500em;
  line-height: 0.3;
  font-weight: normal;
}

<div class="top-con">
  <h3 class="prosc">A <span class="pro">Pro</span>gramer</h3>
  <!-- This is the text that the picture blocks.-->
  <img class="mo" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="Mountain-png" width="50px" height="40px">
  <!-- This one is the problem.-->
</div>

没有错误。

Answer 1

标题元素，h1...h6 是 block 元素。这意味着它们之后的任何内容都将从一个新行开始。如果您需要图像直接跟在某些文本之后，请使用 <span>相反(这是一个内联元素)。然后你可以使用 CSS 改变文本的样式，比如 font-size 等。

<div class="top-con">
  <span class="prosc">A <span class="pro">Pro</span>gramer</span>
  <img class="mo" src="//placehold.it/40" alt="Mountain-png">
</div>