CSS - 保持元素的宽度答案

【问题标题】：CSS - Keeping width of elementsCSS - 保持元素的宽度
【发布时间】：2013-03-05 07:08:38
【问题描述】：

是否有 css 规则使父 <div> 在缩放窗口后保持其大小（取决于元素）？为了更清楚，这里有一个例子：

<div style="width: 100%; height: 100%;">
    <div style="width: 30px; height: 30px;">
        text1
    </div>
    <div style="width: 60px; height: 30px;">
        text2
    </div>
    <div style="width: 30px; height: 30px;">
        text3
    </div>
</div>

这段代码应该会调出一个内部有 3 个较小 div 的 div。现在，当您调整窗口大小时，各个子项将被“分解”成新行。

如何防止这种行为？使用min-width 是行不通的，因为我想要动态的宽度，添加和删除孩子应该是可能的。我想到的唯一选择是通过 javascript 计算孩子数，然后通过 javascript 设置 min-width 属性。但这应该可以用css处理，我认为。

【问题讨论】：

所以您希望这些 div 并排放置？
是的，不将它们包装成单独的行。 white-space: nowrap; 解决了这个问题。

标签： css dynamic width

【解决方案1】：

添加：

white-space: nowrap;

到父 div。我认为这将使他们保持在同一条线上。在您提供的示例中，您还需要：

display: inline;

在子 div 上。

http://jsfiddle.net/9dzBy/

【讨论】：

谢谢，我已经搜索了大约一个小时，但没有找到任何东西。成功了！