如何在讲话泡泡旁边设置用户图像

时间:2014-04-09 12:18:20

标签: html css speech

我无法在讲话泡泡旁边设置图片。如果我将语音气泡和用户图像分成相对分区或绝对分区,我会感到困惑吗? 有人请澄清一下并帮助我。

For Left Msg:

<div class='row'>
<div><img src="goes here"></div>
<div class='left-msg'>Message Goes Here</div>
</div>

For Right Msg:

<div class='row'>
<div class='right-msg'>Message Goes Here</div>
<div><img src="goes here"></div>
</div>

演示在这里:http://jsfiddle.net/LwbML/2/

我想要实现的目标:http://oi57.tinypic.com/jpvg4j.jpg

3 个答案:

答案 0 :(得分:0)

浮动布局会满足您的需求吗?

jsfiddle中的修改行如下所示:

<div class='row'>
    <div class='right-msg' style="float:left">Msg</div>
    <div><img style="margin-left:15px;" src="http://dummyimage.com/40x40/000/fff.jpg"/>  </div>
</div>

你可以check the result in a fiddle

答案 1 :(得分:0)

的CSS

img{
    float:right;
    padding-bottom:-10px;
}

.right-msg {
float:left;
}

在右图中检查你的小提琴

This Demo Gives the Output which you have given as sample Output

答案 2 :(得分:0)

<强> HTML

<div class="row">
    <img class="align-left" src="images/img-31.jpg" alt="image description"/>
    <div class="text">Next block</div>
</div>
<div class="row">
    <img class="align-right" src="images/img-31.jpg" alt="image description"/>
    <div class="text">Next block</div>
</div>

<强>的CSS

.align-left {
    float: left;
    margin: 0 10px 0 0;
}
.align-right {
    float: right;
    margin: 0 0 0 10px;
}
.row {
    width: 100%;
    overflow: hidden;
}
.text {
    background: #7bbcff;
    overflow: hidden;
    padding: 5px 15px;
}