html - DIV随机移动

当我加载页面时，页面上向右浮动的一个DIV有时会向下移动。当我刷新页面时，它通常会恢复正常，但是如果我向刷新密钥发送了垃圾邮件，那么经常会再次将其移下。

这是我的HTML，其中#users_area是我遇到问题的地方：

<!-- Main Window -->
    <div id="container">
        <img src="images/saay_title.png" id="saay_title"/>
        <div class="areas" id="chat_area">
        </div>
        <div class="areas" id="users_area">
        </div>
        <form><textarea class="areas" id="type_area" placeholder="Chat..."></textarea></form>
        <input type="button" value="Send" id="submit">
    </div>
</body>
</html>

这是我的CSS，其中不包括大多数样式属性：

/* Global */

body, html {
/* Settings */
    margin: 0%;
    padding: 0%;
}

#container {
/* Settings */
    width: 90%;
    margin: auto;
    margin-top: 1%;
    margin-bottom: 1%;
    padding: 1%;
}

#saay_title {
/* Settings */
    width: 10%;
    display: block;
    margin: auto;
    padding: 1%;
}

/* Chat Page */

.areas {
/* Settings */
    display: inline-block;
    padding: 1%;
}

#chat_area {
/* Settings */
    width: 70%;
    height: 8em;
    margin-bottom: 1%;
}

#type_area {
/* Settings */
    width: 70%;
    height: 4em;
    resize: none;
}

#users_area {
/* Settings */
    width: 20%;
    height: 8em;
    float: right;
    margin-bottom: 1%;
}

#submit {
    /* Settings */
        -webkit-user-select: none;
    cursor: pointer;
    display: inline-block;
    margin-top: 1%;
    padding:
}

注意：抱歉，这是我在Stack Overflow上的第一篇文章，并且我对编程还比较陌生。也许您想建议我如何更好地格式化我的帖子或缩短它。 ;）

最佳答案

您在说哪种浏览器？不同的浏览器表现不同。

如果我能猜到的话，您可能有舍入错误的问题。尝试首先使用绝对单位（px，em，...）而不是％，如果这样可以解决您的问题，则可能是舍入错误。

一个简单的例子，所以你明白我的意思：

3格宽度为33.3％的浮点数-从数学上来说，它们的总和为99.9％，因此一切都应该很好。但是某些浏览器（例如，较旧的IE）在进行布局之前会先计算33％，因此，如果您获得20px，则会得到6.66px * 3，它将四舍五入为7px，而7px * 3 = 21px。

如何解决问题：
1.以绝对单位工作
2.研究响应式设计并以绝对单位工作（这样，您至少可以进行一些调整）
3.使用表格（如果使表格具有“代表性”，则甚至可以在html5中进行细化）
4.仅在某些浏览器中有效
5.根据javascript重新计算大小
6.使用flex-box
...