将两个div对齐到较高的底部

Question

以上是我想要完成的模型。

我有两行不同的div需要与行的底部对齐，我在每个div的底部都有一个强灰色规则。这些灰色规则应水平对齐。

最大的问题是，由于这是一个WordPress主题，每个div都需要能够根据内容量垂直扩展和收缩。这意味着，如果左侧的.description变得更高，.page-title和.sidebar需要进行调整以确保灰色规则对齐。这使我无法使用任何固定的高度，我可以找出一个系统。

我的第一个解决方案是使用绝对和相对定位的组合：使用两个容器div，.row-1和.row-2，都使用position: relative，并添加position: absolute; bottom: 0;。但是，这似乎不起作用，没有为每个.row- div分配固定的高度，无论我使用浮点数还是左：0; / right：0;定位各个div。

我能想到的唯一其他解决方案是使用JavaScript获取最高div的高度并适当调整边距，但我不愿意将JavaScript用于样式。是否有一个我错过的更好的解决方案？

Answer 1

这是一个常见的CSS问题，并没有完美的解决方案。

我所知道的最好的是你所谈论的那个：制造容器'位置：亲戚'和孩子position: absolute; top:0; bottom:0;。

事实上，如果孩子们漂浮了，他们就会失控，你需要clearfix才能使你的容器具有正确的高度。

Answer 2

如果您需要.description div具有固定大小但是还需要它对于内容量是动态的，那么请使用css属性overflow:scroll或overflow:auto以便它给出一个滚动条来显示额外的内容而不改变div的大小。

同样对于侧边栏，给它一个float:right并将它放在第2行div之前，这将把它放在右边。第2行div和内容div将在左侧显示，只要它垂直延伸到它们的方向或它们具有固定的宽度。

Answer 3

为什么不尝试使用CSS框架，它们很容易定制，而且非常容易使用。试试960.gs或blueprintcss.org。还有许多其他版本的960框架可用。

我个人建议960因为它没有其他人那么复杂。

<div class="grid_7 prefix_1">
    <div class="grid_2 alpha">
        ...
    </div>
    <div class="grid_3">
        ...
    </div>
    <div class="grid_2 omega">
        ...
    </div>
</div>
<div class="grid_3 suffix_1">
    ...
</div>

这是一个固定宽度的4列。