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

Question

页面布局流畅，登录状态 div float 到页面右上角。

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

假设这是因为浏览器在渲染之前不知道包含的 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();
    });
}