0

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

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

在messagediv 里面有 4 个 div 孩子：

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

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

我想要什么： 我需要让 divs:a和y 位置与 y 位置b相同。最好用CSS。cdir

请注意：谷歌浏览器是我的测试目标。所以不要担心 IE 或任何其他浏览器。

4

3 回答 3

3

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

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

于 2013-04-02T20:10:03.640 回答
2

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

检查这个小提琴

于 2013-04-02T20:13:44.877 回答
-1

如果您需要在页面加载后更改它，您可以使用此代码在 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() 获取与文档相关的位置，因此您可以确定偏移量在所有浏览器中都是正确的。

于 2013-04-02T20:18:30.760 回答