DIV在纯CSS文本聊天模拟中的正确位置

Question

我正在尝试使用纯CSS创建文本聊天的外观。一种文本聊天，其中一个人的文本由屏幕左侧的语音气泡表示，其他人则由屏幕右侧的语音气泡代表。

我差不多到了，我创建了一个JSFiddle示例。有两个问题。

最大的问题是，指针在右边的气泡，代表右边的人，需要在右边对齐。但我找不到一种方法让它们在不浮动的情况下对齐，如果我浮动它们，它们就会与其他气泡重叠，造成混乱。

如何使类bubble-right粘在右侧？

第二个问题是，我使用的是display: inline-block;，这使得气泡只有文本那么宽。我必须将white-space: pre-line;放入包含的DIV中，以便使气泡正确堆叠。不幸的是，这会造成额外的空间。我尝试放入line-height声明来防止这种情况发生，但似乎没有帮助。

如何使气泡垂直堆叠和交替，而不产生我不需要的额外空白？

这是CSS：

.bubble-dialog {
    white-space: pre-line;
    line-height:0;
}
.bubble-left,
.bubble-right {
    line-height: 100%;
    display: inline-block;
    position: relative;
    padding: .25em .5em;
    background: pink;
    border: red solid 3px;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;
    margin-bottom: 2em;
}
.bubble-left {
    margin-right:10%;
}
.bubble-right {
    margin-left:10%
}
.bubble-left:after,
.bubble-left:before,
.bubble-right:after,
.bubble-right:before {
    content: "";
    position: absolute;
    top: 21px;
    border-style: solid;
    border-width: 13px 17px 13px 0;
    border-color: transparent pink;
    display: block;
    width: 0;
}
.bubble-left:after,
.bubble-left:before {
    border-width: 13px 17px 13px 0;
    border-color: transparent pink;
}
.bubble-right:after,
.bubble-right:before {
    border-width: 13px 0 13px 17px;
    border-color: transparent pink;
}
.bubble-left:after {
    left: -16px;
    border-color: transparent pink;
    z-index: 1;
}
.bubble-left:before {
    left: -19px;
    border-color: transparent red;
    z-index: 0;
}
.bubble-right:after {
    right:-16px;
    border-color: transparent pink;
    z-index: 1;
}
.bubble-right:before {
    right:-19px;
    border-color: transparent red;
    z-index: 0;
}

Answer 1

我不太理解你的第二个问题，但对于第一个问题，你可以将这个css添加到你的左类和右类中：

我加上clear:both和display:block，然后像你说的那样加上浮子，右边的气泡会粘在右边；这是小提琴：

.bubble-left,
.bubble-right {
    line-height: 100%;
    display: block;
    position: relative;
    padding: .25em .5em;
    background: pink;
    border: red solid 3px;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;
    margin-bottom: 2em;
    clear: both;
    max-width:50%;
}
.bubble-left {
    float: left;       
    margin-right:10%;
}
.bubble-right {
    float:right;
    margin-left:10%
}

至于你的第二个问题，我不知道为什么会有空格，但去掉<p>标签的底边后就可以了，所以我把margin-bottom:0添加到<p>标签中；