css - 让 HTML 表格(或 div)环绕 float 元素，用尽所有剩余空间

Question

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

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

(这里有一些代码可以作为实验的基础:我希望 div - 或等效表格 - 不与 float 框重叠，但采用可用的全部宽度。)

<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>

我发现的唯一接近的东西是让表格中的一列具有巨大的宽度，比可能的更长 - 例如3000 像素。然后表格“扩展”以尝试达到 3000px 但不能，因此它填充了可用宽度，考虑到 float 框靠近页面顶部时，只是将整个宽度向下一点当 float 框不再存在时。

我希望我已经解释得足够好，如果没有，请发表评论。我确实搜索了很多重复项，但我相信我没有找到这个确切的问题；只有人们要求同样的事情，但在 float 框“不碍事”后表格没有扩展到全宽。谢谢。

Answer 1

我有一个针对 div 的解决方案，但没有针对表格的解决方案。 JsFiddle solution

div 具有“溢出:隐藏”，因此它们会填充尽可能多的空间，但如果到达 float 元素则停止。

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