Html 如何使div动态更改为内容宽度，并在浏览器窗口更改大小时保持该宽度？

看看这个：（场景1）

很简单。一个有很多其他演员的剧组。父div的固定宽度约为1000像素，子div设置为显示：inline block；当您使浏览器窗口小于父窗口时，会出现一个滚动条，您可以滚动查看其余窗口

现在看一下：（场景2）

父项和子项相同，但父项的宽度由放置在其中的div子项的数量动态确定。真是太棒了。但是，当您缩小浏览器窗口时，父div与窗口一样宽，子div开始环绕，使父div更高（即使我们设置了固定的高度！）

---

如何使父级

div

在宽度上既像场景2中那样动态，又在浏览器窗口变小时保持其形状/高度/宽度，以便获得滚动条？

更新答案以包含空白行：

#container {
    height:150px;
    border:1px solid pink;
    white-space:nowrap;
    overflow:auto;
}

---

最小宽度

是一种方法：

#container {
    height:150px;
    border:1px solid pink;
    min-width:1100px; // set the minimum width of the container to 1100px
    width: 100%; // if the window size is bigger than 1100px, then make the container span the entire window
}

看一个活生生的例子

一种常见的实现方法是使用

空白

属性，如下所示：

#container {
    border:1px solid pink;
    white-space: nowrap;
}
#widget {
    display: inline-block;
    width:100px;
    height:100px;
    background-color:red;
}​

---

查看一个实时示例

溢出：自动在这里最合适。您只希望在出现溢出时查看滚动条；）这在父div中提供了一个垂直滚动条。我想要的是浏览器窗口给我一个水平滚动条，而不是调整div的大小如果是这样的话，那么另一个答案可能就是你正在寻找的。。。或者，您不希望最小宽度为1100px，您只希望宽度由子元素确定？因为这不是您要查找的答案（溢出：自动），所以我将使用上次尝试进行更新。这将在父DIV中提供滚动条，而不是在浏览器窗口中提供滚动条。jacktheripper收到了，谢谢！是的，我有点困惑“动态的宽度…但也保持它的形状/高度/宽度”。希望我们其中的一个就是他想要的：）这很好用，直到你在父项中添加更多的小部件/子项。那我们又有同样的问题了！我需要的是一个自动设置的固定宽度。也许这应该用javascript来完成？（数一数子项的数量，并相应地设置父项宽度？）！！！非常感谢你！我很想投票，但我没有这个名声哈哈哈。
#container {
    height:150px;
    border:1px solid pink;
    min-width:1100px; // set the minimum width of the container to 1100px
    width: 100%; // if the window size is bigger than 1100px, then make the container span the entire window
}

#container {
    border:1px solid pink;
    white-space: nowrap;
}
#widget {
    display: inline-block;
    width:100px;
    height:100px;
    background-color:red;
}​