css - 垂直对齐 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;

我已将每个donorbox DIV 的宽度设置为43.5%，并添加了float:left，以便每行始终适合2。

由于 DIV 将具有不同的高度，具体取决于用户写入消息的长度，因此 div 的显示相当不均匀(请参阅上面链接的页面)。因此，我想找到一种将 DIV 垂直居中的方法，以便每行始终有两个 DIV，但使它们显示更均匀，即使 2 个 DIV 的垂直中心点对齐。

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

为了让我所讲的内容更清楚，我在下面添加了两张图片:

当前

必需

Answer 1

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

P.s.如果您需要 IE7 支持 display: inline-block; 添加 *display: inline; *缩放:1; ;)