CSS - 保持元素的宽度

Question

是否有一个 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不会工作，因为我想让宽度动态，添加和删除 child 应该是可能的。我想到的唯一选择是通过 javascript 计算 child 数量，然后设置 min-width通过 javascript 属性。但我认为这应该可以用 css 来处理。

Answer 1

添加:

white-space: nowrap;

到父 div。我认为这将使他们保持一致。在您提供的示例中，您还需要:

display: inline;

在子 div 上。

http://jsfiddle.net/9dzBy/