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

Question

我有一个脚本，可以为我网站捐赠墙上写的每条消息生成一个DIV。您可以看到捐款墙here。

这是生成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的方法，这样每行总有两个，但是它们显示更均匀，即使两个DIV的垂直中心点对齐。

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

为了让我更清楚地了解我的内容，请在下方附上两张图片：

当前

REQUIRED

Answer 1

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

P.S。如果您需要IE7支持display: inline-block;添加*display: inline; *zoom:1;;）

Answer 2

您可以使用以下内容让第二个浮动：

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