CSS：两个高度相等的浮动 div 列，垂直拆分右 div

Question

我正在尝试完成如下布局：

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

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

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

真正的问题似乎源于左右 div 中较小的一个没有扩展到容器的高度，容器的高度使用溢出：隐藏来占据两者中较大的高度。有什么想法吗？

到目前为止我所拥有的：

<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

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

Answer 2

您可以放弃浮动并尝试使用 display:table-cell（和 table、table-row...），但这会限制 IE8 及更高版本的浏览器支持。

但如果你确实让它像那样工作，你可以只使用 javascript 来让 IE6 / IE7 玩得很好（如果你需要它们......）。

Answer 3

如果你试图用 CSS 自己来完成这件事，你会发疯的。

如果您只需要支持现代浏览器，您可以使用display: table，它将为您提供传统表格的垂直对齐控制。

否则，这对于 JS 来说确实是一项工作，如果您使用的是 jQuery 之类的东西，那么完成它是相当简单的。

Answer 4

您需要使用 JavaScript，在 $(document).ready 中您可以设置 3 个变量，每个高度一个。在两个右边的之间添加一个额外的 div（让我们称之为扩展器），并根据其他三个的高度，更改这个 div（扩展器）的高度。

请记住，var dos = $("#one").height(); 会为您提供 id ="one" 的 div 的高度

要更改 div 高度，只需使用 $("#expansor").height(newHeight) ;

'newHeight' 是第一个 div 高度减去右侧 2 个 div 的结果。

Answer 5

如前所述，在不使用大量 JavaScript 的情况下尝试在所有浏览器上全面运行此功能会发疯。

我的解决方案是结合使用绝对定位和相对定位以及最小/最大高度方案。您还将使用更多嵌套的 DIV，确保使用虚拟的“clear:both”DIV 来确保正确推送内容。

例子：

<!-- Clear CSS -->
.clear {
    clear:both;
    height:0;
    line-height:0;
    margin:0;
    padding:0;
    font-size:0;
    border:none;
}
<!-- End CSS -->

<div id="container" style="width:400px;position:relative;">
    <div id="column-right" style="height:300px;width:195px;float:right;">
        <div id="block-top" style="position:absolute;top:0;height:145px;">
            <div class="content">
                ...
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div id="block-bottom" style="position:absolute;bottom:0;height:145px;">
            <div class="content">
                ...
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div id="column-left" style="position:relative;height:300px;width:195px;float:left;">
        <div class="content">
            ...
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div class="clear">&nbsp;</div>
</div>