Html 如何在语音气泡旁边设置用户图像
我无法在语音气泡旁边设置图像。我很困惑,我应该将语音气泡和用户图像包装成相对分割还是绝对分割? 有人请澄清这一点,并帮助我 对于左侧消息:Html 如何在语音气泡旁边设置用户图像,html,css,speech,Html,Css,Speech,我无法在语音气泡旁边设置图像。我很困惑,我应该将语音气泡和用户图像包装成相对分割还是绝对分割? 有人请澄清这一点,并帮助我 对于左侧消息: <div class='row'> <div><img src="goes here"></div> <div class='left-msg'>Message Goes Here</div> </div> 对于右侧消息: <div class='row'> &
<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>
演示如下:
我试图实现的目标是:浮动布局能满足您的需求吗 JSFIDLE中的修改行如下所示:
<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>
你可以。Css
img{
float:right;
padding-bottom:-10px;
}
及
右内图像检查您的小提琴
HTML
全屏演示:你在找这个吗?你做了什么改变?因为我以前也试过浮球?如果我使用float:left来表示left msg,那么它就不起作用了。我检查了一点标记以及切换的图像和消息,我尝试了你的答案。但它不太干净。如果我根据语音气泡css更改.text css,它会重叠。请再次检查问题,我已经发布了一张演示图片。无论浏览器窗口大小如何,我都希望有这样的图像。请帮忙!!对不起,我不能确定你的意思是什么-如果我理解正确,你需要添加到我的示例中。第{margin:0 0 25px;}行-它防止与前一行重叠请检查前一个问题,我已经发布了一个演示图像。确保现在检查你是否看到它与你的示例完全一样请检查后一个问题,我发布了一个演示图像。
.right-msg {
float:left;
}
<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>
.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;
}