让HTML表(或div)环绕浮动元素，用完所有剩余空间

Question

我正在尝试实现一个右边的浮动框，左边是一个可变的表或div列表(通过ASP.NET Repeater生成，但这并不重要)。表/div应该展开以填充剩余的宽度。

这很好:将框向右浮动，并在每个表或margin-right上设置一个div。但是，我希望表/div在“超过”浮动的末尾后扩展到填充整个页面的宽度--基本上是围绕浮动框，填充剩余的宽度。

(以下是作为实验基础的一些代码:我希望divs或等效表-不与浮动框重叠，但采用可用的全宽度。)

<div style="border: 1px solid black; background-color: red; float:right; width:40em; margin:10px; padding:10px;">
    Hello, world
</div>

<div style="background:yellow; margin:10px; padding:10px;">
    One
</div>

<div style="background:yellow; margin:10px; padding:10px;">
    Two
</div>

<div style="background:yellow; margin:10px; padding:10px;">
    Three
</div>


</body>
</html>

我发现唯一能做到的事情就是让表中的一列有一个很大的宽度，比可能的宽度更长--比如3000px。然后表格“扩展”到3000px，但是不能，所以它填满了可用的宽度，当浮动框接近页面顶部时，它会考虑到浮动框，当浮动框不再存在时，它只会将整个宽度再往下一点。

我希望我已经解释得足够好了，如果没有的话，请评论。我确实搜索了很多重复的东西，但我相信我没有找到这个确切的问题；只有人们要求相同的东西，但在浮动的盒子“不在路上”之后，桌子没有扩展到完整的宽度。谢谢。

Answer 1

我有一个用于div的解决方案，但不适用于表。JsFiddle solution

div有"overflow:hidden“，这样它们就能填满所有能找到的空间，但如果它们到达一个浮动的元素，就会停止。

我想不出一张桌子的解决方案。它们有完全不同的流程，我不相信你可以让某些行比其他行更小，但表格不是我的专长……