Question

最近我试图为博客编写我的第一个主题，但是当我垂直调整窗口大小时，我的头像移动有问题。

我看到这是一个常见的问题，但我已经尝试了许多解决方案并且没有解决。我尝试将元素包装在一个<div id="wrapper">中并添加position: absolute;但是头像继续移动。我还尝试使用position: relative放置一个父函数，并将position: absolute内的相关元素嵌套（就是那个术语？）无济于事。除了化身之外，其他所有内容都保持固定。这是css：

  .avatar {
    position: fixed;
    left: 40px;
    bottom: 400px;
    border-radius: 100%;
    padding: 10px;
    border-radius: 90px;
    border: 3px solid white;
  }
  .descripbox {
      position: fixed;
      left: 45px;
      top: 222px;
  }
  .titlebox {
      position: fixed;
      left: 45px;
      top: 210px;
  }
  .home {
      position: fixed;
      left: 190px;
      top: 60px;
  }
  .ask {
      position: fixed;
      left: 210px;
      top: 85px;
  }
  .themes {
      position: fixed;
      left: 220px;
      top: 110px;
  }

这是html：

<img class="avatar" src="{PortraitURL-128}">
    <div class="descripbox">
        {block:Description}
        <h2>{Description}</h2>
        {/block:Description}
    </div>
    <div class="titlebox"
    <h1><a href="{BlogURL}">{Title}</a></h1>
    </div>
    <div class="home">
        <li><a href="/">home</a></li>
    </div>
    <div class="ask">
        <li><a href="/faq">ask</a></li>
    </div>
    <div class="themes">
        <li><a href="/tagged/themes">themes</a></li>
    </div>

我是初学者，所以我可能犯了一些非常明显的错误。任何帮助表示赞赏。

Answer 1

在你的代码中，其中一个div标签没有关闭。关闭标签后检查Plz

纠正一个：

<div class="titlebox">
    <h1><a href="{BlogURL}">{Title}</a></h1>
    </div>

关闭以下标记

<div class="titlebox"
    <h1><a href="{BlogURL}">{Title}</a></h1>
    </div>

Answer 2

我不知道它是否正确？你需要这样的吗？在div元素中缺少紧密括号 <div class="titlebox">

 <style>
     .avatar {
        position: fixed;
        left: 40px;
        bottom: 400px;
        border-radius: 100%;
        padding: 10px;
        border-radius: 90px;
        border: 3px solid white;
      }
      .descripbox {
          position: fixed;
          left: 45px;
          top: 222px;
      }
      .titlebox {
          position: fixed;
          left: 45px;
          top: 210px;
      }
      .home {
          position: fixed;
          left: 190px;
          top: 60px;
      }
      .ask {
          position: fixed;
          left: 210px;
          top: 85px;
      }
      .themes {
          position: fixed;
          left: 220px;
          top: 110px;
      }
    </style>
    <img class="avatar" src="{PortraitURL-128}">
        <div class="descripbox">
            {block:Description}
            <h2>{Description}</h2>
            {/block:Description}
        </div>
        <div class="titlebox">
        <h1><a href="{BlogURL}">{Title}</a></h1>
        </div>
        <div class="home">
            <li><a href="/">home</a></li>
        </div>
        <div class="ask">
            <li><a href="/faq">ask</a></li>
        </div>
        <div class="themes">
            <li><a href="/tagged/themes">themes</a></li>
        </div>

Answer 3

只需删除 ~~bottom：400px;~~

.avatar {
    position: fixed;
    left: 40px;

    border-radius: 100%;
    padding: 10px;
    border-radius: 90px;
    border: 3px solid white;
  }

调整窗口大小时项目移动

3 个答案: