当页面调整大小时，Html元素会移动

Question

所以我做了一个简单的固定标题，但是当我在非全尺寸窗口上渲染页面然后最大化窗口时，文本似乎改变了它的位置。

如果我合理地增加窗口大小，它也会这样做，除此之外，有时图像会变形。

在html body标签中：

git checkout master
git pull origin master

在css中：

<div id="header">
        <div id="user-info">
            <img class="fit-height" id="avatar" src="add_ons/sources/images/t/avatar.png"/>
            <p id="name" >BALL</p>
        </div>
    </div>

如果我最大化窗口会发生什么：

Answer 1

看看吧！

＆＃13;

＆＃13;

#header {
  height: 10%;
  width: 100%;
  min-width: 200px;/*what u want..*/
  background-color: #ffcc00;
  padding: 0px;
  border: 0px;
  margin: 0px;
  position: fixed;
  top: 0em;
  left: 0em;
}

#user-info {
  height: 100%;
  left: 5%;
  top: 10%;
}
#avatar {
  margin:0.5%;
  height: 80%;
  dispaly: inline;
}

#name {
  dispaly: inline-block;
  margin-top:-30px;
  margin-left:40px;
}

＆＃13;

<div id="header">
  <div id="user-info">
    <img class="fit-height" id="avatar" src="http://lorempixel.com/100/100" />
    <p id="name">Lorem ipsum dolor sit amet,</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

正确拼写ball时，单词display:block会跳下来。否则，css指令拼写错误（dispaly:block）并被忽略。

display:block指令会将您的图像从内联元素（在其他元素旁边）（通常是其中）转换为块元素，该元素必须位于其自己的行上。

因此，如果您希望图片和单词并排，请不要在图片上使用display:block，并在float:left标记上使用<p>。

但请注意，float:left将从HTML流中删除一个元素，而父DIV将不会考虑其高度。有关此现象的示例，请参阅此SO答案：

Can't set DIV equal to another DIV HTML/Javascript