css - 垂直对齐由 PHP 脚本生成的重复 DIV，每行两个

Question

我有一个脚本，它为我网站上的捐赠墙上写的每条消息生成一个 DIV。你可以在这里看到捐赠墙。

这是生成 DIV 的脚本部分：

foreach( $donors as $donor ):
$output = '<div class="donorbox"><p><strong>'.$donor->name.'</strong> donated '.$donation.'<small class="date time">on '.$datetime.'</small><blockquote class="comment">'.nl2br($donor->comment).'</blockquote></p></div>';
endforeach;

我已将每个施主箱 DIV 的宽度设置为 43.5%，并添加了 float:left，这样 2 始终适合每一行。

由于 DIV 将具有不同的高度，这取决于用户写入消息的时间长短，因此 div 的显示相当不均匀（参见上面链接的页面）。所以我想找到一种将DIV垂直居中的方法，这样每行总是有两个，但这样它们会显示得更均匀，即2个DIV的垂直中心点是对齐的。

当前实现的另一个问题是，当左边一个DIV的高度大于右边那个div的高度时，下一个div停留在页面的右边，而不是被强制到左边，这不是我想要的。如果您查看页面并减小浏览器窗口的宽度，您现在可以看到这一点。第三个供体箱 DIV 位于右侧。

为了希望使我的内容更清晰，我在下面提供了两张图片：

当前的

必需的

Answer 1

如果您不确定元素的高度，请始终使用display: inline-block而不是float. 如果您现在更改它 - 它们将始终正确定位。为了使它们垂直居中 - 只需添加vertical-align: middle它们即可:)

Ps 如果您需要 IE7 支持display: inline-block;添加*display: inline; *zoom:1;;)

Answer 2

您可以使用以下方法让第二个浮动正确：

.yourclass:nth-of-type(2n) {float:right !important;}