分配问题

Question

我有这个jsFiddle：http://jsfiddle.net/pqCGd/。

它包含一个包含messages div的大message div。这些message div是自动生成的，但为了这个例子和简单性，我省略了这种div的自动生成，并提供了一个消息div的例子。

message div内有4个div孩子：

1. dir包含图片：我目前正在使用此测试图片
2. a包含3组数据，最高p标记包含相当长的字符串，因此它小于其他p标记的其余部分
3. b其中包含另外3组数据，这次最后p标记相当冗长且需要较小的字体大小
4. c只包含一个名为view
的按钮

问题： 如果您查看a，b或c，您可能会注意到由于缺少其他单词，div似乎“堕落”。除了dir div之外，每个元素的div的y位置似乎都是关闭的。它们意味着与相同的y位置并排。如果您在查看此影响时遇到问题，可以使用Google Chromes“检查元素”工具并查找这些标记的位置。将鼠标悬停在元素检查器中时，应显示一个蓝色框，显示div的封装大小和位置。您应该会看到a低于dir，b低于a，c低于b。 button也应出现在div边界之间（部分显示）。

我想要的是什么： 我需要得到div：a，b和c的y位置与dir的y位置相同。最好用CSS。

请注意： Google Chrome是我的测试目标。因此，不要担心IE或任何其他浏览器。

Answer 1

以下是将{vertical-align: top}应用于.a，.b和.c的示例。也许这就是你所追求的。

http://jsfiddle.net/isherwood/pqCGd/1/

Answer 2

希望我理解正确。您可以将float: left;添加到div.message div。所以他们会并排坐在一起。

check this fiddle

Answer 3

如果您需要在页面加载后进行更改，可以使用此代码在jQuery中更改它

var offset = $(".dir").offset();
$(".a").offset({ top: offset.top});
$(".b").offset({ top: offset.top});
$(".c").offset({ top: offset.top});

结果如下 http://jsfiddle.net/ekvU9/1/

请注意.offset（）获取与文档相关的位置，因此您可以确定偏移量在所有浏览器中都是正确的。