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>標籤;