Html 元素随着页面大小的变化而移动答案

【问题标题】：Html elements move as the page is resizedHtml 元素随着页面大小的变化而移动
【发布时间】：2016-01-04 00:01:11
【问题描述】：

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

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

在html body标签中：

<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>

在css中：

#header{    

    height: 10%;
    width: 100%;
    background-color: #ffcc00;
    padding: 0px;
    border: 0px;
    margin: 0px;
    position: fixed;
    top: 0em;
    left: 0em;

}

#user-info{

    position: absolute;
    height: 80%;
    left: 2%;
    top: 10%;
}

#avatar{

    height: 100%;
    dispaly: block;

}

#name{

    height: 100%;
    dispaly: block;
    float: right

}

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

【问题讨论】：

你能提供一个小提琴吗？
jsfiddle.net/sy764/79

标签： html css debugging

【解决方案1】：

看看吧！

#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;
}

<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>

【讨论】：

【解决方案2】：

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

display:block 指令会将您的图像从一个内联元素（除了其他元素之外）——通常是——变成一个块元素，该元素必须在自己的行中。

所以，如果你想让图片和文字并排，不要在图片上使用display:block，而在<p>标签上使用float:left。

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

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

【讨论】：