将img的上边距依赖于另一个div的高度

时间：2017-05-20 16:01:24

标签： html css alignment margin

所以我有这个问题/答案看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而且片段不是。我尝试了百分比，但它没有使用更长的文本。你知道怎么做吗？谢谢！

2 个答案:

答案 0 :(得分：1)

使用您当前的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>

更新：您的头像现在可见

答案 1 :(得分：0)

目前，最简单的解决方案是为图片提供position: absolute;作为答案讲话泡泡是position: relative;。要给它正确的位置，你必须添加right: 0;。

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题