CSS:两个浮动div列,高度相等,右侧垂直分割

Question

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

两个浮子:左侧的div并排放置,每个都有45%的宽度.在右边,div包含两个子部分 - 一个与div的底部对齐,另一个与顶部对齐.

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

我一直在玩人造柱,清楚:全部,溢出:隐藏,底部: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 不可行。

示例：这里

所有“列”都inline blocks被迫不换行，这样您就可以将它们全部垂直对齐，然后将第三个“列”（右下角）通过负边距插入到位