html - 固定位置的div宽度问题

如何使固定位置的div适合其内容宽度？
我做了一个demo here
在单击“加载”按钮之前，div必须只有足够的宽度来包含gif图像和按钮。
加载更多内容时，div的宽度必须与其宽度匹配。
这是我做的

body{background: #eee; }
#divToCenter{
    border-radius: 5px;
    box-shadow: 0 0 0 10px rgba(0,0,0,0.2);
    background: #fff;
    padding: 20px;

    position: fixed;
    top: 20px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;

    max-width: 400px;
}

最佳答案

既然您使用JavaScript/jQuery来显示/隐藏加载程序，为什么不通过JavaScript更改框的width？
例如，您可以简单地切换一个名为.wide的类，以获得如下所需的结果：
EXAMPLE HERE
CSS:

#divToCenter{
    /* other declarations... */
    text-align: center;
    width: 50px;
}

#divToCenter.wide {
    width: 400px;
    text-align: left;
}

查询：

var $divToCenter = $("#divToCenter");

$("#show-more-data").click(function() {
    // ...
    $divToCenter.addClass("wide");
});

$("#show-less-data").click(function() {
    // ...
    $divToCenter.removeClass("wide");
});