CSS语音气球宽度

Question

我相信对于熟悉CSS语言的人来说这是一个非常基本的问题（不是我的情况大声笑）。我使用jsfiddle托管的this code在我的网站上制作了一些语音气球。当气球内的消息很少时，问题出现了。例如，在上面发布的代码中，更改代码来自＆＃34;冒泡你＆＃34;气球到类似的东西：

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

你会看到气球与前一个气球保持在同一水平线上，这很丑陋而且很奇怪。我希望气球能够一个接一个地保持下去（一个在另一个之下），即使消息像一个简单的消息一样小嗨......我应该在气球类中更改或添加哪些属性才能获得这个？< / p>

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
}