将浮动的CSS语音气泡移动到新行

Question

我从this fiddle改编了这个CSS：

.chat {
    width: 400px;
}
.bubble {
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
}
.bubble::before {
    background-color: #F2F2F2;
    content:"\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform: rotate(29deg) skew(-35deg);
    -moz-transform: rotate(29deg) skew(-35deg);
    -ms-transform: rotate(29deg) skew(-35deg);
    -o-transform: rotate(29deg) skew(-35deg);
    -webkit-transform: rotate(29deg) skew(-35deg);
    width: 20px;
}
.me {
    float: left;
    margin: 5px 45px 5px 20px;
}
.me::before {
    box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4);
    left: -9px;
}
.you {
    float: right;
    margin: 5px 20px 5px 45px;
}
.you::before {
    box-shadow: 2px -2px 2px 0 rgba(178, 178, 178, .4);
    right: -9px;
}

HTML

<div class="bubble me">Hello there!</div>
<div class="bubble you">Hi. I'm an expandeable chat box with box shadow. How are you? I expand      horizontally and vertically, as you can see here.</div>
<div class="bubble me">Awesome.1</div>
<div class="bubble you">Awesome.2</div>
<div class="bubble me">Awesome.3</div>
<div class="bubble you">Awesome.4</div>

除了1个问题外，这看起来真的很好。

问题是如果我们不修复div宽度，气泡信息将水平排列。

当前结果：

期望的结果：

Answer 1

浮动元素将在同一条线上粘在一起;使用CSS clear属性可以防止这种情况。

在您的情况下，您只需要：

• 在clear: both和.me上设置.you。

这样可以保持＆＃34; me＆＃34;和＆＃34;你＆＃34;当它们仅包含少量文本时，在不同的行上回复。

Read more about the CSS clear property.

CSS

.me {
    float: left;
    clear: both;
    margin: 5px 45px 5px 20px;
}
.you {
    float: right;
    clear: both;
    margin: 5px 20px 5px 45px;
}

结果：

Runnable示例：

＆＃13;

＆＃13;

.chat {
    width: 400px;
}
.bubble {
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
}
.bubble::before {
    background-color: #F2F2F2;
    content:"\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform: rotate(29deg) skew(-35deg);
    -moz-transform: rotate(29deg) skew(-35deg);
    -ms-transform: rotate(29deg) skew(-35deg);
    -o-transform: rotate(29deg) skew(-35deg);
    -webkit-transform: rotate(29deg) skew(-35deg);
    width: 20px;
}
.me {
    float: left;
    clear: both;
    margin: 5px 45px 5px 20px;
}
.me::before {
    box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4);
    left: -9px;
}
.you {
    float: right;
    clear: both;
    margin: 5px 20px 5px 45px;
}
.you::before {
    box-shadow: 2px -2px 2px 0 rgba(178, 178, 178, .4);
    right: -9px;
}

＆＃13;

<div class="chat">
    <div class="bubble me">Hello there!</div>
    <div class="bubble you">Hi. I'm an expandeable chat box with box shadow. How are you? I expand horizontally and vertically, as you can see here.</div>
    <div class="bubble me">Awesome.</div>
    <div class="bubble me">Awesome.</div>
    <div class="bubble me">Awesome.</div>
    <div class="bubble you">Awesome.</div>
    <div class="bubble me">Awesome.</div>

</div>

＆＃13;

＆＃13;

＆＃13;