我希望在左边的项目中使用float: left在同一行上有两个项目。
单凭这一点我没有任何问题。问题是，即使你非常小的浏览器调整大小，我希望这两个项目保持在同一行。你知道......就像桌子一样。
无论如何，目标是保持右边的物品不被包裹。
如何告诉浏览器使用CSS，我宁愿拉伸包含div而不是包装它，所以float: right; div低于float: left; div？
我想要的是：
\
+---------------+ +------------------------/
| float: left; | | float: right; \
| | | /
| | |content stretching \ Screen Edge
| | |the div off the screen / <---
+---------------+ +------------------------\
/
将您的浮动<div>s包装在使用此跨浏览器最小宽度hack的容器<div>中：
.minwidth { min-width:100px; width: auto !important; width: 100px; }
您可能还需要设置“溢出”但可能不需要。
这是因为：
!important声明与min-width结合使得IE7 +中的所有内容都保持一致min-width，但它有一个bug，这样width: 100px会覆盖!important声明，导致容器宽度为100px。我解决这个问题的方法是使用一些jQuery。我这样做的原因是因为A和B是百分比宽度。
HTML：
<div class="floatNoWrap">
<div id="A" style="float: left;">
Content A
</div>
<div id="B" style="float: left;">
Content B
</div>
<div style="clear: both;"></div>
</div>
CSS：
.floatNoWrap
{
width: 100%;
height: 100%;
}
jQuery的：
$("[class~='floatNoWrap']").each(function () {
$(this).css("width", $(this).outerWidth());
});
另一种选择是，而不是浮动，将white-space属性nowrap设置为父div：
.parent {
white-space: nowrap;
}
并重置白色空间并使用内联块显示，以便div保持在同一行，但您仍然可以给它一个宽度。
.child {
display:inline-block;
width:300px;
white-space: normal;
}
这是一个JSFiddle：https://jsfiddle.net/9g8ud31o/
将您的浮动体包裹在div中，其最小宽度大于浮动体的总宽度+边距。
不需要hacks或HTML表。
解决方案1：
display：table-cell（不广泛支持）
解决方案2：
表
（我讨厌黑客。）
另一种选择：不要漂浮你的右栏;只需给它一个左边距将其移动到浮点之外。你需要一两个修复IE6，但这是基本的想法。
您确定浮动的块级元素是解决此问题的最佳方法吗？
我的经验中经常遇到CSS困难，事实证明我无法看到做我想要的事情的原因是我陷入了关于我的标记的隧道视野（思考“我怎么能做到这些这样做了吗？“）而不是回头看看我需要实现的确切内容，并且可能会稍微改一下我的html来促进这一点。
我建议使用表来解决这个问题。我有类似的问题，只要表只是用来显示一些数据而不是主页面布局就可以了。
将此行添加到浮动元素选择器
.floated {
float: left;
...
box-sizing: border-box;
}
它将防止填充和边框添加到宽度，因此元素始终保持在行中，即使您有例如。三个元素，宽度为33.33333％
当用户水平缩小窗口大小并且这会导致浮动垂直堆叠时，移除浮动并在第二个div（即浮动）上使用margin-top：-123px（您的值）和margin-left：444px（您的值）到将div放在浮动状态时。当这样做时，当窗口变窄时，右侧div保持原位并在页面太窄而不能包含它时消失。 ...（对我来说）当浏览器窗口被用户缩小时，比右侧div“跳”到左侧div下方更好。