gpt4 book ai didi

css - 将 float 的 CSS 对话泡泡移动到新行

转载 作者:行者123 更新时间:2023-11-28 09:26:15 25 4
gpt4 key购买 nike

我从 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 宽度,气泡消息将水平排列。

当前结果:

Current

期望的结果:

Desired

最佳答案

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

结果:

Result

可运行示例:

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

关于css - 将 float 的 CSS 对话泡泡移动到新行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25874706/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com