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.

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.

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

你确定浮动块级元素是这个问题的最佳解决方案吗?

在我的经验中，经常遇到CSS困难，结果证明我看不到做我想做的事情的方法的原因是我陷入了关于我的标记的隧道视野(思考“我如何让这些元素做到这一点?”)而不是回头看看我到底需要实现什么，可能会稍微重做我的html来促进它。

将这一行添加到浮动元素选择器中

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

它将防止填充和边框添加到width，所以元素始终保持在行，即使你有eg。三个元素宽度为33.33333%

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