CSS:两个高度相等的 float div列，垂直分割右div

Question

我正在尝试完成如下所示的布局:

两个 float:left div 并排放置，每个占宽度的 45%。在右侧，div 包含两个子部分 - 一个与 div 的底部对齐，一个与顶部对齐。

如果右边的部分足够长，它们当然会在中间相遇，然后开始推出包含 div 的高度:

我一直在尝试使用伪列、clear:all、overflow:hidden、bottom:0 以及我能想到的任何其他技巧，但我无法让这种行为发挥作用。

真正的问题似乎源于左右 div 中较小的那个没有扩展到容器的高度，它使用 overflow:hidden 占据了两个中较大的那个的高度。有什么想法吗？

我目前拥有的:

<div style="overflow:hidden; clear:both">
    <div id="column1" style="float: left; width:45%">
    <div id="column2" style="float: left; width:45%">
        <div style="float: left; top: 0">Content Here should sit up top</div>
        <div style="float: left; bottom: 0">Content Here should sit on bottom</div>
    </div>
</div>

结果是这样的，如果不在某处使用固定高度，我无法将顶部和底部分开:

感谢大家的关注!

Answer 1

我有 CSS 解决方案，因为 JS 不可行..

示例:here

所有“列”都是 内联 block 强制不换行，这样你就可以垂直对齐它们，然后第三个“列”(右下角)通过负边距插入到位