Question

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

enter image description here

两个浮动：左侧div并排放置，每个都有45％的宽度。在右边，div包含两个子部分 - 一个与div的底部对齐，另一个与顶部对齐。

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

enter image description here

我一直在玩假柱，清楚：全部，溢出：隐藏，底部：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>

这就是它的结果，我无法在不使用固定高度的情况下将顶部和底部分开：

enter image description here

感谢您好好看看！

Answer 1

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

示例：here

所有“列”都被inline blocks强制不包裹，这样你可以将它们全部垂直对齐，然后第3个“列”（右下角）通过负边距开槽到位

Answer 2

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

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

Answer 3

你会疯狂地尝试用CSS完成这个。

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

否则，这对JS来说真的是一个工作，如果你使用像jQuery这样的东西，那么完成它是相当简单的。

Answer 4

您需要在$（文档）内使用JavaScript。您可以设置3个变量，每个高度一个。在两个正确的div之间添加一个aditional 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>

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

5 个答案:

示例：here