css - 将 float 的 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

float 元素会粘在一起在同一条线上；这是通过 CSS clear 属性阻止的。

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

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

当“我”和“你”只包含少量文本时，这有一个额外的好处，那就是让它们在不同的行中回复。

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;
}

结果:

可运行示例:

.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;
}

<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>