Html 将img的上边距取决于另一个div的高度

所以我有这个问题/答案看起来像html，在两个SpeechBubble的两边各有一个img。我希望第二个img与第二个speechbubble对齐，因此其顶部边距根据第一个speechbubble内的高度增加或减少。 这是我的密码：

.问题{ 宽度：100%； 高度：自动； 线高：20px； 颜色：{color:Answer}； } .问题{ 位置：相对位置； 宽度：415px； 最小高度：25px； 填充物：5px； 左边距：55像素； 左侧填充：10px； 右边填充：10px； 背景：D8D8D8； -webkit边界半径：5px； -moz边界半径：5px； 边界半径：5px； -webkit盒阴影：2px2p5px0px rgba0,0,0,0.30； -moz盒阴影：2px2p5px0pxrgba0,0,0,0.30； 盒影：2px2px5px0pxRGBA0,0,0.30； } .提问：之后{ 内容：； 位置：绝对位置； 边框样式：实心； 边框宽度：10px 15px 10px 0； 边框颜色：透明D8D8D8； 显示：块； 宽度：0； z指数：1； 左：-15px； 顶部：7px； } 阿斯卡瓦塔先生{ 宽度：30px； 填充：3倍； 保证金权利：4px； -webkit转换：.3s轻松； -moz转换：.3s容易； -o-转变：.3s； 过渡：放松； } .阿斯卡瓦塔：悬停{ -webkit转换：scale1.5； -moz变换：scale1.5； -ms变换：scale1.5； 转换：scale1.5； } 问题化身{ 位置：绝对位置； 排名：0； 左：-55px； } 回答者阿凡达{ 位置：绝对位置； 排名：0； 右：-55px； } .答复{ 位置：相对位置； 边缘顶部：10px； 宽度：425px； 最小高度：30px； 填充物：5px； 背景：97c5e0； -webkit边界半径：5px； -moz边界半径：5px； 边界半径：5px； -网络工具包盒阴影：-2px2px5px0px rgba0,0,0,0.30； -莫兹盒阴影：-2px2px5px0pxrgba0,0,0,0.30； 盒影：-2px2px5px0px rgba0,0,0,0.30； } .回答：之后{ 内容：； 位置：绝对位置； 边框样式：实心； 边框宽度：10px 0 10px 15px； 边框颜色：透明97c5e0； 显示：块； 宽度：0； z指数：1； 右图：-14px； 顶部：7px； } 这是一个问题：Lorem ipsum dolor sit amet，一位杰出的献身者，他是一位临时劳工，一位伟大的领袖。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，还必须为动物的劳动负责

---

这是一个答案：对于所有的自然错误，我们都能清晰地看到它。现在，最简单的解决方案是给图像一个位置：绝对位置；正如答案一样，语音泡泡是位置：相对；。要给它正确的位置，必须添加正确的：0

您可以在下面的代码段中看到结果：

.问题{ 宽度：100%； 高度：自动； 线高：20px； 颜色：{color:Answer}； } .提问{ 左边距：55像素； {block:if250pxPosts} 宽度：185px； {/block:if250pxPosts} {block:PermalinkPage} 宽度：425px； {/block:PermalinkPage} 位置：相对位置； 宽度：415px； 最小高度：25px； 填充物：5px； 左侧填充：10px； 右边填充：10px； 背景：D8D8D8； -webkit边界半径：5px； -moz边界半径：5px； 边界半径：5px； -webkit盒阴影：2px2p5px0px rgba0,0,0,0.30； -moz盒阴影：2px2p5px0pxrgba0,0,0,0.30； 盒影：2px2px5px0pxRGBA0,0,0.30； } .提问：之后{ 内容：； 位置：绝对位置； 边框样式：实心； 边框宽度：10px 15px 10px 0； 边框颜色：透明D8D8D8； 显示：块； 宽度：0； z指数：1； 左：-15px； 顶部：7px； } .问题img{ 宽度：30px； 填充：3倍； 保证金权利：4px； -webkit转换：.3s轻松； -moz转换：.3s容易； -o-转变：.3s； 过渡：放松； } .问题img：悬停{ -webkit转换：scale1.5； -moz变换：scale1.5； -ms变换：scale1.5； 转换：scale1.5； } 回答者阿凡达{ 位置：绝对位置； 右：0； } .答复{ {block:if250pxPosts} 宽度：185px； {/block:if250pxPosts} {block:PermalinkPage} 宽度：425px； {/block:PermalinkPage} 位置：相对位置； 边缘顶部：10px； 宽度：425px； 最小高度：30px； 填充物：5px； 背景：97c5e0； -webkit边界半径：5px； -moz边界半径：5px； 边界半径：5px； -网络工具包盒阴影：-2px2px5px0px rgba0,0,0,0.30； -莫兹盒阴影：-2px2px5px0pxrgba0,0,0,0.30； 盒影：-2px2px5px0px rgba0,0,0,0.30； } .回答：之后{ 内容：； 位置：绝对位置； 边框样式：实心； 边框宽度：10px 0 10px 15px； 边框颜色：透明97c5e0； 显示：块； 宽度：0； z指数：1； 右图：-14px； 顶部：7px； } 这是一个问题：Lorem ipsum dolor sit amet，Concertetu 代表精英们，请暂时加入劳工和大企业。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，还必须为动物的劳动负责

---

这是一个答案：所有人都能清楚地看到错误所在。用你目前的html结构，几乎不可能实现你想要的。我已经稍微更改了您的html和css，请参见代码片段

.问题{ 位置：相对位置； 宽度：415px； 最小高度：25px； 填充物：5px； 左边距：55像素； 左侧填充：10px； 右边填充：10px； 背景：D8D8D8； -webkit边界半径：5px； -moz边界半径：5px； 边界半径：5px； -webkit盒阴影：2px2p5px0px rgba0,0,0,0.30； -moz盒阴影：2px2p5px0pxrgba0,0,0,0.30； 盒影：2px2px5px0pxRGBA0,0,0.30； } .提问：之后{ 内容：； 位置：绝对位置； 边框样式：实心； 边框宽度：10px 15px 10px 0； 边框颜色：透明D8D8D8； 显示：块； 宽度：0； z指数：1； 左：-15px； 顶部：7px； } .阿凡达{ 宽度：30px； 填充：3倍； 保证金权利：4px； -webkit转换：.3s轻松； -moz转换：.3s容易； -o-转变：.3s； 过渡：放松； } .阿凡达：悬停{ -webkit转换：scale1.5； -moz变换：scale1.5； -ms变换：scale1.5； 转换：scale1.5； } 问题化身{ 位置：绝对位置； 排名：0； 左：-55px； } 回答者阿凡达{ 位置：绝对位置； 排名：0； 右：-55px； } .答复{ 位置：相对位置； 边缘顶部：10px； 宽度：425px； 最小高度：30px； 填充物：5px； 背景：97c5e0； -webkit边界半径：5px； -moz边界半径：5px； 边界半径：5px； -网络工具包盒阴影：-2px2px5px0px rgba0,0,0,0.30； -莫兹盒阴影：-2px2px5px0pxrgba0,0,0,0.30； 盒影：-2px2px5px0px rgba0,0,0,0.30； } .回答：之后{ 内容：； 位置：绝对位置； 边框样式：实心； 边框宽度：10px 0 10px 15px； 边框颜色：透明97c5e0； 显示：块； 宽度：0； z指数：1； 右图：-14px； 顶部：7px； } -> 这是一个问题：Lorem ipsum dolor sit amet，一位杰出的献身者，他是一位临时劳工，一位伟大的领袖。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，还必须为动物的劳动负责

---

这是一个答案：所有人都能清楚地看到错误所在。感谢您的回复！你所做的似乎是一个很好的方法让它工作，但我不知道为什么现在IMG不见了，我完全按照你说的做了，我刚刚将avatar类更改为askavatar，因为我的代码的另一部分已经有了这个类。。我能告诉你一些你能帮助我的事情吗？请更新你的更改以便我能检查哪里有问题你的html结构是错误的。你需要把里面和里面。我已经提出了一个编辑请求，所以你可以测试它。很抱歉，我不知道为什么，但这不起作用。它使答案“阿凡达”一直向右移动，与第一个问题“speechbubble”处于同一高度。