我正在尝试通过以下方式设置气泡聊天的风格:
.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;
}
.human {
float: left;
margin: 5px 45px 5px 20px;
}
.human::before {
box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
left: -9px;
}
.bot {
float: right;
margin: 5px 20px 5px 45px;
}
.bot::before {
box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
right: -9px;
}
不幸的是,如果聊天范围太广,一侧的说法就开始排成一排。
我试图通过将成对的短语包含在单独的div中来阻止这种情况
<div class="sayanswerpair">
<div class="humanphrase human bubble">Hi!</div>
<div class="botphrase bot bubble" id="botphrase1">Hi it's great to see you!</div>
</div>
但这没有帮助。
代码在这里:https://jsfiddle.net/dimskraft/fk4wcsx2/
最佳答案
是的,只需在CSS中将clear: both;
添加到.bubble
选择器中即可。那应该得到想要的效果。
快速说明:当父容器的子代浮动时,父容器会折叠。尽管您不需要这样做,但可以通过在父选择器中添加overflow:hidden;
来防止这种情况。