html - 当 float 的DIV不适合容器时，是否可以使其不换行？

This question already has answers here:

CSS non-wrapping floating divs
                                
                                    （4个答案）
                                
                        
                                4年前关闭。
            
                    
以下是示例HTML代码：

<div id="container" style="">
 <div id="left" style="float: left; width: 200px;">...</div>
 <div id="right" style="float: right; width: 100px;">...</div>
</div>

如果将#right的大小调整为小于300px，是否可以使#left不跳到新行（在#container下面）？

最佳答案

用简短的Google搜索找到的答案...

使用display: inline-block代替float并给容器white-space: nowrap。

#container {
    width: 100%;
    height: 120px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
}
#container > div {
    display: inline-block;
    height:120px;
    background: red;
}

下面是一个示例：http://jsfiddle.net/wwwth4wx/