css - 如何让 CSS float 在一行中？

Question

我想在同一行上使用 float: left 为左侧的元素放置两个元素。

我一个人实现这个没有问题。问题是，我希望这两个元素保持在同一行即使您将浏览器调整得非常小。你知道……就像 table 一样。

目标是防止右侧的元素无论如何。

如何使用 CSS 告诉浏览器我宁愿拉伸(stretch)包含的 div 而不是将其包装以便 float: right; div 低于 float: left; div?

我想要的:

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

Answer 1

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

.parent {
     white-space: nowrap;
}

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

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

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