Question

我正在尝试使用以下内容设置泡泡聊天：

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

Answer 1

问题是您需要在 .sayanswerpair 类分组上使用 clearfix 选择器，因为元素在该父级中是浮动的。请参阅下面的更改：

<强> CSS

// clearfix solution: makes it so inner elements on grouping cannot float out of parent and cause float issues with other elements
.sayanswerpair:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

// not needed, but makes the last phrase in the grouping pushed down
.sayanswerpair > .bubble:last-of-type {
  margin-top: 30px;
}

Answer 2

您可以将clear: left添加到.human规则，然后将clear: right添加到.bot规则

（再次编辑：）

或者将clear:both;添加到这两个规则中，总是将下一个气泡放在低于前一个气泡的位置，如果它位于相反的一侧。

Answer 3

我使用flexbox创建了一个解决方案。使用此代码，您可以删除对，并按正确的顺序设置气泡，以获得良好的聊天记录。查看以下代码：

＆＃13;

#conversationarea {
  display:flex;
  flex-direction:column;
}
.bubble{
  background-color: #F2F2F2;
  border-radius: 5px;
  box-shadow: 0 0 6px #B2B2B2;
  display: inline;
  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 {
  align-self:flex-start;
  margin: 5px 45px 5px 20px;
}
.human::before {
  box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
  left: -9px;
}
.bot {
  align-self:flex-end;
  margin: 5px 20px 5px 45px;
}
.bot::before {
  box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
  right: -9px;
}

＆＃13;

<div id="conversationarea" style="max-height:1024px;overflow:scroll;overflow-x: hidden;width:100%">
  <div class="humanphrase human bubble">Hi!</div>
  <div class="botphrase bot bubble" id="botphrase1">Hi it's great to see you!</div>
  <div class="humanphrase human bubble">How are you?</div>
  <div class="botphrase bot bubble" id="botphrase2">I'm very well. How are you doing?</div>
</div>

＆＃13;

你可以在这里找到一个工作小提琴：https://jsfiddle.net/sebastianbrosch/htbjk5ns/1/

Answer 4

是的，只需将clear: both;添加到CSS中的.bubble选择器即可。这应该会产生预期的效果。

快速注意：当父容器的子容器浮动时，父容器会折叠。虽然您不需要这样做，但可以通过将overflow:hidden;添加到父选择器来防止这种情况。

为什么浮动div-s甚至脱离了育儿div-s？

4 个答案: