如何让 CSS 浮动保持在一行？

我想使用以下命令将两个项目放在同一行上float: left对于左侧的项目。

我独自实现这一点没有任何问题。问题是，我想要这两个项目stay在同一条线上即使您将浏览器大小调整得很小。你知道...就像桌子一样。

目标是防止右侧的物品缠绕无论.

如何使用 CSS 告诉浏览器我更愿意拉伸包含div比把它包裹起来所以float: right;div 位于以下float: left; div?

我想要的是：

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

另一种选择是将空白属性 nowrap 设置为父 div，而不是浮动：

.parent {
     white-space: nowrap;
}

并重置空白并使用内联块显示，以便 div 保持在同一行，但您仍然可以为其指定宽度。

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

这是一个 JSFiddle：https://jsfiddle.net/9g8ud31o/ https://jsfiddle.net/9g8ud31o/