如何修复聊天框中的 div 对齐？

Question

我试图修复或纠正我的聊天框应用程序的对齐方式。 我将 3 div .bubble 放置在 div 行 .chatlines 中，但它似乎不起作用（所有人都挤在一起！）。很难解释，请看下面的代码和示例图片。

如果您有任何建议或示例来纠正我的对齐方式，我将不胜感激。 谢谢炖

good example here

}   
    body {
    background-color: grey;
    margin: 0px;
    
    font-family: Arial;
    color: darkgrey;
    font-size: 12px;
    line-height: .3;
    letter-spacing: .5px;
}
/*.............. chatlins ..............*/
    
    .chatlines {
    position:fixed;
    min-height: 250px;
    bottom: 110px;
    width: 80%;
    left: 50%;
    transform:translateX(-50%); /* center */
}
    .bubble {
    position: absolute;
    height: 50px;
    max-width: 250px;
    padding: 10px 15px;
    border-radius: 20px 20px 20px 0px;
    background-color: rgba(0, 0, 0, .3);
}

<div class="chatlines">
<div class="bubble" align="left" style="padding-bottom: 10px;height: 60px;">Bubble3</div>
<div class="bubble" align="right" style="padding-bottom: 10px;height: 60px;">Bubble2</div>
<div class="bubble" align="left" style="padding-bottom: 10px;height: 60px;">Bubble1</div>
</div>

Answer 1

您可以在偶数编号的.chatlines div 元素上使用nth-child 选择器和margin-left: auto 属性。这将使聊天线内的所有其他 div 元素向右移动。

div.chatlines div:nth-child(even) {
  margin-left: auto;
}