将 img 的上边距设置为另一个 div 的高度

Question

所以我有这个看起来 html 的问题/答案，并且在两个语音气泡的每一侧都有一个 img。我希望第二个 img 与第二个语音气泡对齐，因此它的上边距根据第一个语音气泡内的高度增加或减少。 这是我的代码：

.question{
width:100%;
height:auto;
line-height:20px;
color:{color:Answer};
}

.questionin {    
    position: relative;
    width: 415px;
    min-height: 25px;  
    padding: 5px;
    margin-left:55px;
    padding-left:10px;
    padding-right:10px;
    background: #D8D8D8;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.30);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.30);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.30);
}

.questionin:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #D8D8D8;
    display: block;
    width: 0;
    z-index: 1;
    left: -15px;
    top: 7px;
}

.askavatar {
  width:30px;
  padding:3px;
  margin-right:4px;
  -webkit-transition:.3s ease;
  -moz-transition:.3s ease;
  -o-transition:.3s ease;
  transition:.3s ease;
}

.askavatar:hover {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}

#questionavatar {
  position: absolute;
  top: 0;
  left: -55px;
}

#answeravatar {
  position: absolute;
  top: 0;
  right: -55px;
}

.answer {
    position: relative;
    margin-top:10px;
    width: 425px;
    min-height: 30px;
    padding: 5px;
    background: #97c5e0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.30);
    -moz-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.30);
    box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.30);
}

.answer::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 10px 0 10px 15px;
    border-color: transparent #97c5e0;
    display: block;
    width: 0;
    z-index: 1;
    right: -14px;
    top: 7px;
}

<div class="question">
<img src="{AskerPortraitURL-48}"
align="left"id="questionavatar" class="askavatar"><img src="{image:Avatar}" align="right" id="answeravatar" class="askavatar"></div>
<div class="questionin">
This is a question : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="answer">
This is an answer : Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>

第二个 img 偏右是正常的，因为我原来的宽度是 435 而 sn-p 不是。我尝试了百分比，但它不适用于较长的文本。你知道怎么做吗？谢谢！

Answer 1

使用您当前的 html 结构，几乎不可能实现您正在寻找的内容。我对你的 html 和 css 稍作改动，见代码 sn-p

.questionin {    
    position: relative;
    width: 415px;
    min-height: 25px;  
    padding: 5px;
    margin-left:55px;
    padding-left:10px;
    padding-right:10px;
    background: #D8D8D8;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.30);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.30);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.30);
}

.questionin:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #D8D8D8;
    display: block;
    width: 0;
    z-index: 1;
    left: -15px;
    top: 7px;
}

.avatar {
  width:30px;
  padding:3px;
  margin-right:4px;
  -webkit-transition:.3s ease;
  -moz-transition:.3s ease;
  -o-transition:.3s ease;
  transition:.3s ease;
}

.avatar:hover {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}

#questionavatar {
  position: absolute;
  top: 0;
  left: -55px;
}

#answeravatar {
  position: absolute;
  top: 0;
  right: -55px;
}

.answer {
    position: relative;
    margin-top:10px;
    width: 425px;
    min-height: 30px;
    padding: 5px;
    background: #97c5e0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.30);
    -moz-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.30);
    box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.30);
}

.answer::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 10px 0 10px 15px;
    border-color: transparent #97c5e0;
    display: block;
    width: 0;
    z-index: 1;
    right: -14px;
    top: 7px;
}

<!--
  YOU DO NOT NEED THIS TAG
<div class="question">
</div>
-->
<div class="questionin">
<img src="{AskerPortraitURL-48}"
align="left"id="questionavatar" class="askavatar">
This is a question : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="answer">
<img src="{image:Avatar}" align="right" id="answeravatar" class="askavatar">
This is an answer : Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>

更新：您的头像现在可见

Answer 2

目前，最简单的解决方案是给图像一个position: absolute；因为答案气泡是position: relative;。要给它正确的位置，你必须添加right: 0;。

你可以在下面的sn-p中看到结果：

.question{
width:100%;
height:auto;
line-height:20px;
color:{color:Answer};
}

.questionin {
    margin-left:55px;
    {block:if250pxPosts}
    width:185px;
    {/block:if250pxPosts}
    {block:PermalinkPage}
    width:425px;
    {/block:PermalinkPage}
position: relative;
width: 415px;
min-height: 25px;
padding: 5px;
padding-left:10px;
padding-right:10px;
background: #D8D8D8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.30);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.30);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.30);
}

.questionin:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #D8D8D8;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 7px;
}
 
.question img{
width:30px;
padding:3px;
margin-right:4px;
-webkit-transition:.3s ease;
-moz-transition:.3s ease;
-o-transition:.3s ease;
transition:.3s ease;
}

.question img:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}

#answeravatar{
    position: absolute;
    right: 0;
}

.answer {
    {block:if250pxPosts}
    width:185px;
    {/block:if250pxPosts}
    {block:PermalinkPage}
    width:425px;
    {/block:PermalinkPage}
position: relative;
margin-top:10px;
width: 425px;
min-height: 30px;
padding: 5px;
background: #97c5e0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.30);
-moz-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.30);
box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.30);
}

.answer:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 15px;
border-color: transparent #97c5e0;
display: block;
width: 0;
z-index: 1;
right: -14px;
top: 7px;
}

<div class="question">
<img src="{AskerPortraitURL-48}"
align="left" id="questionavatar">
<div class="questionin">
This is a question : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="answer">
<img src="{image:Avatar}" align="right"id="answeravatar">
This is an answer : Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>