html - 如何在对话泡泡旁边设置用户图像

Question

我无法在对话气泡旁边设置图像。我很困惑我应该将对话泡泡和用户图像包装成相对划分还是绝对划分？ 有人请澄清这一点并帮助我。

对于左消息:

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

对于正确的消息:

<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

Answer 1

CSS

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

和

.right-msg {
float:left;
}

在右图里面检查你的 fiddle

This Demo Gives the Output which you have given as sample