如何使 div 动态更改为内容宽度，即使浏览器窗口改变大小，它仍保持该宽度？答案

【问题标题】：How can I make a div dynamically change to content width and have it remain that width even as the browser window changes size?如何使 div 动态更改为内容宽度，即使浏览器窗口改变大小，它仍保持该宽度？
【发布时间】：2012-11-03 12:08:39
【问题描述】：

看看这个：（场景1）

#container {
    height:150px;
    border:1px solid pink;
    width:1100px;
}
#widget {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:red;
}

http://jsfiddle.net/DQFja/1/

非常简单。一个 div 里面有一堆其他的 div。父 div 的固定宽度约为 1000 像素，子 div 设置为 display:inline-block;当您使浏览器窗口小于父窗口时，会出现一个滚动条，您可以滚动查看其余部分。

现在看看这个：（场景 2）

#container {
    height:150px;
    border:1px solid pink;
    float:left;
}
#widget {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:red;
}

http://jsfiddle.net/zZRq7/

同样的父子元素，但是父元素的宽度是由你在其中放置的 div 子元素的数量动态决定的。这是花花公子。但是，当您缩小浏览器窗口时，父 div 会变得与窗口一样宽，并且子 div 开始环绕，从而使父 div 更高（即使我们设置了固定高度！）

如何使父 div 两者的宽度都像场景 2 那样动态，但在浏览器窗口变小时也保持其形状/高度/宽度，以便我们可以获得滚动条？

【问题讨论】：

标签： html css width

【解决方案1】：

Min-width 是要走的路：

#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
}

查看实时示例here。

实现的一个hacky方法是使用white-space属性，如下所示：

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

查看实时示例here

【讨论】：

是的，我有点困惑“动态宽度......但也要保持它的形状/高度/宽度”。希望我们的一个是他正在寻找的:)
这工作正常，直到您将更多小部件/子项添加到父项中。然后我们又遇到了同样的问题！我需要的是一个自动设置的固定宽度。也许这应该在javascript中完成？（计算孩子的数量并相应地设置父宽度？）
破解答案有效！！！太感谢了！我会对此表示赞同，但我没有声誉哈哈哈。

【解决方案2】：

更新答案以包含空白行：

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

http://jsfiddle.net/DQFja/3/

【讨论】：

overflow:auto; 在这里最合适。您只想在溢出时看到滚动条；）
这给了我一个在父 div 中垂直滚动的滚动条。我想要的是浏览器窗口给我一个水平滚动条而不是调整 div 的大小
如果是这种情况，那么另一个答案可能就是您正在寻找的......或者您不希望最小宽度为 1100 像素，您总是想要宽度因为它是确定子元素？
由于这不是您要寻找的答案（溢出：自动），我正在更新我的最后一次尝试。
这给了我父 DIV 中的滚动条，而不是浏览器窗口。 jacktheripper 知道了，谢谢！