Question

我有一个评论列表，我希望将其显示为“气泡”。

<div class="item">
    <img>
    <div class="bubble">Hi, how are you?</div>
</div>
<div class="item">
    <img>
    <div class="bubble">Super good. <br/>Thank you<br/>And you?</div>
</div>

我想在左侧使用img，我希望右侧有气泡。这就是我想出来的。

.bubble {
    display:inline-block;
}
.item img {
    float:left;
}

但是如果消息很长，那么泡沫会在下一行出现。如何让邮件保持在同一行？

我无法在气泡上设置最大宽度，因为我需要它是流动的。

Answer 1

只需将white-space: nowrap;和margin-right : 47px;添加到.item

即可

（47px是5px原始边距+ 42px浮动img的宽度）

和white-space: normal;到.bubble

DEMO： http://jsfiddle.net/3Zvn4/8/

说明：容器div white-space:nowrap;上的.item会阻止内联元素（包括内联块）换行到下一行。 white-space由元素的子元素继承，因此您必须将white-space:normal;放在.bubble上，以便其文本在其宽度内具有正常的包装。

Answer 2

这将是你想要的。

.item {
    margin : 5px;
    margin-bottom:10px;
    clear:both;    
}
.bubble {
    padding: 8px;
    background: #DBE8F9;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-left: 65px;
    display: table-cell;
}
.item img {
    float: left;
    display: table-cell;
    height:42px;
    width:42px;
    margin-right: 5px;
    background-color:gray;
}

如何防止与浮点相邻的长内联块元素移动到新行？

2 个答案: