Html 固定定位div宽度内的问题

如何使固定定位的div适合其内容宽度

我做了一个

在单击加载按钮之前，div必须只有足够的宽度来容纳gif图像和按钮

加载更多内容时，div的宽度必须与其宽度相适应

这是我制作的

CSS

body{背景：#eee；}
#分区中心{
边界半径：5px；
盒影：0.10px rgba（0,0,0,0.2）；
背景：#fff；
填充：20px；
位置：固定；
顶部：20px；
右：0；
左：0；
右边距：自动；
左边距：自动；
最大宽度：400px；
}

将

显示：表格

，

位置：相对

和

边距：0自动

添加到以下元素：

#divToCenter{
    border-radius: 5px;
    box-shadow: 0 0 0 10px rgba(0,0,0,0.2);
    background: #fff;
    padding: 20px;
    display: table;/*Add this*/
    position: relative;/*Change fixed with relative*/
    top: 20px;
    margin:0 auto;/*Add this*/
    max-width: 400px;
}

---

既然您使用JavaScript/jQuery显示/隐藏加载程序，为什么不通过JavaScript更改框的

宽度呢

例如，您可以简单地切换名为
.wide
的类，以实现如下所示的预期结果：


CSS:

#divToCenter{
/*其他声明*/
文本对齐：居中；
宽度：50px；
}
#divToCenter.wide{
宽度：400px；
文本对齐：左对齐；
}

jQuery:

var$divToCenter=$（“#divToCenter”）；
$（“#显示更多数据”）。单击（函数（）{
// ...
$divToCenter.addClass（“宽”）；
});
$（“#显示较少的数据”）。单击（函数（）{
// ...
$divToCenter.removeClass（“宽”）；
});
它实际上适合宽度。它需要填充20px，br需要空格。我不是说宽度（填充和br）div没有居中anymore@Alek相对定位使文档中的元素保持正常流动。考虑到一个弹出框，这个方法是毫无意义的：OP并没有提到弹出框的任何内容。如果是弹出框，比如模态弹出框等，那么我可能会建议另一种解决方案。Thx的反馈：）+1似乎工作，因为我想，我会这样做，如果没有其他css唯一的方式来做。非常感谢。