css - 右浮动 div 在页面中间浮动，直到页面渲染完成

Question

该页面具有流畅的布局，以及一个浮动到页面右上角的登录状态 div。

问题是元素只是位于页面的中心，直到页面完全呈现，此时它移动到正确的位置。

假设这是因为浏览器在渲染之前不知道包含的 div 有多大。

有处理这个问题的技术吗？

这是div的css：

    div#headerLinks
{
    float: right;
    background: url('../Img/SomeImage.jpg') top left;
    display: inline-block;
    padding: 10px 14px 10px 15px;
    margin-right: -20px;
}

Answer 1

您总是可以使用一些 Javascript 和 jQuery 来解决它。

继续显示加载图像，直到文档准备好或加载。隐藏图像并显示其他 div。

代码可能如下所示：

$(function () {
    onLoadContent();
});

function onLoadStatistics() {
    $(window).load(function () {
        $('#loading-image').hide();
        $('#content').show();
    });
}