你好,我想做的是在我的页面右上角放置一个图像。尤其是在标题中。即使在stack和整个互联网上找到了帮助,我也无法搞清楚。
我现在得到的是:
html - 使用CSS将图片放在标题中-LMLPHP
html - 使用CSS将图片放在标题中-LMLPHP
第二张照片是我想要的。
这是我的代码:

header {
  margin-top: 10px;
  font-family: verdana;
  line-height: 2em;
  background-color: rgb(187, 204, 232);
}

header img {
  max-width: 100%;
  float: right;
  width: 100px;
  height: 100px;
  margin-top: -50px
}

<body>
  <header>
    <h1>CSS in Action</h1>
    <img id="logoImage" src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg">
  </header>
  <nav>
    <ul>
      <li>Topic 1</li>
      <li>Topic 2</li>
      <li>Topic 3</li>
      <li>Topic 4</li>
    </ul>
  </nav>
  <div class="content">
    <section>
      <h1>Topic 1</h1>
      <img src="pic1.jpg">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      <p>
        <strong>Lorem ipsum</strong> dolor sit <a href="http://www.aau.at" target="_blank">amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam <a href="erat.html" target="_blank">erat</a>.
      </p>
    </section>

    <section>
      <h1>Topic 2</h1>
      <img src="pic2.jpg"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <strong>nonumy</strong> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
        sit <a href="http://www.aau.at" target="_blank">amet</a>.
      </p>
    </section>

    <section>
      <h1>Topic 3</h1>
      <img src="pic3.jpg"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </p>
    </section>
  </div>
  <footer>
    <ul>
      <li>Impressum</li>
      <li>Legal</li>
      <li>Contact</li>
    </ul>
  </footer>

最佳答案

我想你要找的是position:absolute属性。我把你的CSS代码改了一点。希望这能解决你的问题。

header{
    margin: 0;
    padding: 0;
    font-family: verdana;
    line-height: 2em;
    background-color:rgb(187,204,232);
    height: 150px;
}

    header img {
       height: 100px;
       width: 60px;
       position: absolute;
       top: 10px;
       right: 10px;
    }

07-25 21:25