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

Question

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

.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 而片段不是。我尝试使用百分比，但它不适用于较长的文本。你知道怎么做吗？谢谢！

Answer 1

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

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

.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>

Answer 2

以您当前的 html 结构，几乎不可能实现您想要的。我稍微改变了你的 html 和 css，见代码片段

.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>

更新：您的头像现在可见

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

Set an img's top-margin dependant to another div's height

html

css

margin

alignment