我建议使用表格来解决这个问题。我有一个类似的问题，只要表格只是用来显示一些数据，而不是主页的布局，这是好的。

包装你的浮动<div>s在容器<div>，使用这个跨浏览器的最小宽度hack:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

您可能还需要设置“overflow”，但也可能不需要。

这很有效，因为:

important声明和min-width结合在一起，使得在IE7+中所有内容都保持在同一行 IE6没有实现min-width，但它有一个bug, width: 100px会覆盖!important声明，导致容器宽度为100px。

另一个选择是，不使用浮动，而是将空白属性nowrap设置为父div:

.parent {
     white-space: nowrap;
}

并重置空白和使用内联块显示，这样div保持在同一行，但你仍然可以给它一个宽度。

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

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

When user reduces window size horizontally and this causes floats to stack vertically, remove the floats and on the second div (that was a float) use margin-top: -123px (your value) and margin-left: 444px (your value) to position the divs as they appeared with floats. When done this way, when the window narrows, the right-side div stays in place and disappears when page is too narrow to include it. ... which (to me) is better than having the right-side div "jump" down below the left-side div when the browser window is narrowed by the user.

解决方案1: 显示:table-cell(不广泛支持) 解决方案2: 表 (我讨厌黑客。)

另一种选择:不要浮动右列;只要给它一个左边距来移动它超出浮动。你需要一两个黑客来修复IE6，但这是基本的想法。