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> } tag;

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

1 个答案: