CSS语音气球宽度

Question

我相信这对于熟悉CSS语言的人来说是一个非常基本的问题(不是我的情况大声笑).我正在使用jsfiddle上托管的代码在我的网站上制作一些语音气球.当气球内的消息很少时,问题出现了.例如,在上面发布的代码中,将代码从"bubble you"气球更改为:

<div class="bubble you">Hi.</div>

你会看到气球与前一个气球保持在同一水平线上,这很丑陋而且很奇怪.我希望气球一个接一个地保持下来(一个在另一个之下),即使消息像一个简单的'嗨'一样小......我应该在气球类中更改或添加哪些属性才能获得此功能？

Answer 1

添加clear: both到.bubble.

在这里演示:

http://jsfiddle.net/sifriday/mek5Z/1957/

.bubble{
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
    clear: both
}