我是整个行业的新手,我有一个小问题。
我尝试将文本 (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>
没有错误。
最佳答案
标题元素,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>
关于html - 图片前的文字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57321292/