我正在尝试使用以下样式来设置气泡聊天的样式:
.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>
但这没有帮助。
最佳答案
是的,只需将 clear: both;
添加到 CSS 中的 .bubble
选择器。这应该会达到预期的效果。
快速说明:当父容器的子容器 float 时,父容器会折叠。虽然您不需要它,但可以通过将 overflow:hidden;
添加到父选择器来防止这种情况。
关于html - 为什么 float div-s 甚至超出了育儿 div-s?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34341621/