Css Div布局问题

我有这个JSFIDLE:

它包含一个大的

messages

div，其中包含

message

div。这些

message

div是自动生成的，但是为了这个示例和简单性，我省略了自动生成这样的div，并提供了一个message div的示例

消息

div中有4个div子项：

dir

其中包含图像：我当前正在为此使用测试图像

a

包含3组数据，顶部的

p

标记包含一个相当长的字符串，因此它比其他

p

标记小

b

包含另外3组数据，其中最后一个

p

标记相当长，需要较小的字体

c

只包含一个名为

view

问题： 如果查看

a

、

b

或

c

，您可能会注意到div似乎由于缺少其他单词而“下降”。除了

dir

div之外，每个元素的div的y位置似乎都是关闭的。它们意味着与相同的y位置并排。如果您在看到这种影响时遇到问题，您可以使用Google Chromes“inspect element”工具查找这些标记的位置。在元素检查器中将鼠标悬停在它们上方时，应该会显示一个蓝色框，显示div的封装大小和位置。您应该看到

a

低于

dir

，

b

低于

a

，

c

低于

b

。

按钮

也应出现在div边界之间（部分显示）

我想要什么： 我需要使div:

a

、

b

和

c

的y位置与

dir

的y位置相同。最好与CSS

---

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

下面是一个应用于.a、.b和.c的

{vertical align:top}

示例。也许这就是你想要的

---

下面是一个将

{vertical align:top}

应用于.a、.b和.c的示例。也许这就是你想要的

---

希望我能正确理解。您可以添加

float:left至
div.message div
。所以他们会并排坐在一起

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

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

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

结果如下

请注意，.offset（）获取与文档相关的位置，这样您就可以非常确定偏移量在所有浏览器中都是正确的。
如果您需要在页面加载后更改它，您可以使用以下代码在jQuery中更改它

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

结果如下

请注意，.offset（）获取与文档相关的位置，这样您就可以非常确定偏移量在所有浏览器中都是正确的。
太好了，这就解决了它！但首先是什么导致了问题？@jakebird451默认情况下，inline*元素在基线上垂直对齐：@jakebird451确保它们始终显示：inline block；因为如果它们不是内联块或表格单元格，那么垂直对齐将不起作用。太好了，这就解决了它！但首先是什么导致了问题？@jakebird451默认情况下，inline*元素在基线上垂直对齐：@jakebird451确保它们始终显示：inline block；因为如果它们不是内联块或表格单元格，则垂直对齐将不起作用。这也应该起作用。我倾向于避免使用浮动，除非我真的希望内容围绕浮动流动。他们有自己的一套挑战，这也应该奏效。我倾向于避免使用浮动，除非我真的希望内容围绕浮动流动。他们有自己的挑战。