html - 如何在不影响设计的情况下将此图像正确放置在标题旁边

Question

所以我一直在绞尽脑汁想弄清楚这个问题，我是从 PSD 编码的，但是我在定位图像(灯泡)时遇到了问题。

我试过绝对定位，然后调整“右”以将其定位在标题旁边，但出于某种原因，这在上面的部分和它所在的部分之间添加了一些空白。另外，我想在图像上方添加一些填充以使其更整洁，但这只会将图像向下推，而不是在其上方添加填充。

我这样做的另一个问题是，当我更改屏幕大小时，图像会完全移出位置。

我的 CSS:

.lightbulb {
    position: absolute;
    right: 63%;
    margin-top: 20px;
}

我的 HTML:

<section class="what">
    <h2>What is a <span class="red-underline">style tune-up?</span></h2>
    <p>Just like a car needs a tune-up every 100,000 miles or so, your style may also need tune-up every 100,000 tears, smiles, frustrations, or laughs. Your life can sometimes takeover and your sense of style gets worn down, less efficient, and less stylish. A style tune-up allows you to give yourself a little refresher or a little boost VERY QUICKLY since all the work is done for you.</p>
    <p>It’s not just shopping, it’s not just color analysis, it a complete style experience customized to you, your lifestyle, and your style goals.</p>
</section>
<section class="how">
    <img class="lightbulb" src="/img/lightbulb.png" /><h2>Here's <span class="red-underline">how it works:</span></h2>
    <p>Send us your selfies – Take a picture of yourself every day for a week and upload your photos so I can get a sense of your current wardrobe and lifestyle.</p>
    <p>Phone consultation – Review your current style and photos. Answer questions about your current wardrobe, challenges you are having, a lifestyle assessment, and all your basic style stats like color, body shape, etc…</p>

如有任何帮助，我们将不胜感激。

Answer 1

您可以像这样在 h 标签上使用 :before 伪元素:https://jsfiddle.net/qh9u9vba/1/

.how h2:before {
  content:"";
  position:absolute;
  height:50px;
  width:50px;
  margin-left:-60px;
  margin-top:-10px;
  background-image:url('http://placehold.it/50x50');
}

并从您的 HTML 中删除 img。这将使您的 h 标签保持在中间，并将图像放在文本所在的位置。修复边距以适合您的图像大小。祝你好运。

注意:我添加 text-align:center; 只是为了演示目的，否则图像会超出视口(viewport)。