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

问题描述

|| 我正在尝试完成以下布局： 两个float：left div并排放置，每个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>

结果就是这样，如果不在某处使用固定高度，我就无法分开顶部和底部： 谢谢大家的光临！     

解决方法

我有CSS解决方案，因为JS无法执行。 示例：这里 所有\“ columns \”都被迫不换行

inline blocks

，这样您就可以将它们全部垂直对齐，然后将第三个\“ column \”（右下）通过负边距插入到位     ,您可以放下浮标，并尝试使用

display:table-cell

（以及

table

，

table-row

...），但这会限制IE8及更高版本对浏览器的支持。 但是，如果您确实可以使它正常工作，则可以使用javascript来使IE6 / IE7正常运行（如果需要它们的话）。     ,您将疯狂地尝试使用CSS本身来完成此任务。 如果只需要支持现代浏览器，则可以使用

display: table

，它将为您提供传统表格的垂直对齐控件。 否则，这对于JS确实是一项工作，如果您使用的是jQuery之类的工具，那么完成这项工作就相当简单了。     ,您需要在$（document）内使用JavaScript。准备好设置3个变量，每个高度一个。在两个正确的div之间添加一个附加的div（以下称为扩展器），并根据其他三个的高度更改此div（扩展器）的高度。 请记住，

var dos = $(\"#one\").height();

会为您提供id = \“ one \”的div的高度 要更改div高度，只需使用

$(\"#expansor\").height(newHeight) ;

第一个div高度减去右2个div的结果就是'newHeight'。     ,如前所述，您将疯狂尝试在不使用大量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>