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

Above is a mockup of what I want to accomplish.

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

I have two different rows of divs that need to be aligned to the bottom of the row, where I have a strong grey rule at the bottom of each div. These grey rules should align horizontally.

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

The biggest issue is that, since this is a WordPress theme, each div needs to be able to expand and contract vertically based on the amount of content. That means that if .description on the left gets taller, .page-title and .sidebar need to adjust to ensure that the grey rules are aligned. This prevents me from using any fixed heights, which I could figure out a system with.

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

My first solution was using a combination of absolute and relative positioning: use two container divs, .row-1 and .row-2, both with position: relative, and add position: absolute; bottom: 0;. This doesn't seem to work, though, without assigning a fixed height to each .row- div, whether I use floats or left :0;/right: 0; to position the individual divs.

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

The only other solution I can think of is using JavaScript to get the height of the tallest div and adjust margins appropriately, but I'm reluctant to use JavaScript for style. Is there a better solution that I'm missing?

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

3 个解决方案

#1

This is a common CSS issue and there is no perfect solution.

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

The best I know is to the one you talk about : make container ´position: relative´ and children position: absolute; top:0; bottom:0;.

我所知道的最好的是你所谈论的那个：制造容器'位置：相对'和儿童位置：绝对;顶部：0;底部：0 ;.

Indeed if children are floated, they are out of the flow, and you will need clearfix to make your container to have correct height.

事实上，如果儿童漂浮，他们就不在流动中，你需要使用clearfix来使你的容器具有正确的高度。

#2

If you need the .description div to be of fixed size but also need it to be dynamic for the amount of content then use the css property overflow:scroll or overflow:auto so that it will give a scroll bar to show the extra content without changing the size of the div.

如果你需要.description div是固定大小的，但也需要它对于内容量是动态的，那么使用css属性overflow：scroll或overflow：auto，这样它就会给出一个滚动条来显示额外的内容而不需要改变div的大小。

Also for the sidebar, give it a float:right and place it before the row 2 div, this will place it on the right. The row 2 div and the content div will both appear beside it on the left as long as it extends vertically into their way or they have a fixed width.

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

#3

-2

Why don't you try and use CSS framework they are easily customizable and they are very easy to use. try 960.gs or blueprintcss.org. there are many other versions available of 960 framework is available.

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

I personally suggest 960 because it is less complicated than others.

我个人建议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>

This is a 4 column with fixed width.

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

#1