html - 即使容器不换行， float div 也会换行？

Question

有一些关于此的问题，但我还没有找到一个好的答案。已经找了几个小时了。

这是我的 jsfiddle: http://jsfiddle.net/foreyez/Mr2ER/

我有一些简单的标记:

<div class='container'>
    <div class='box1'></div>
    <div class='box2'></div>
    <div class='box3'></div>
</div>

和 CSS:

.container {
    white-space:nowrap;
}

.box1 {
    width:200px;
    height:200px;
    background:red;
    float:left;
}

.box2 {
    width:200px;
    height:200px;
    background:green;
    float:left;
}

.box3 {
    width:200px;
    height:200px;
    background:blue;
    float:left;
}

然而，当窗口足够小时，盒子仍然会环绕。有什么建议么？ 注意:我想保持这个 float:left，所以请不要使用 inline-block 解决方案。

Answer 1

如果您将 width:600px; 添加到 .container 中，它将强制它们保持内联。

这是你的 updated JSFiddle