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，并按照你所说的添加浮动，右侧的气泡会粘在右侧;这里是一个fiddle：

.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>标签;