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

Question

我试图修复或更正我的聊天框应用程序的对齐方式。我将3个div.bubble放在一个div行.chatlines中，但它似乎不起作用(所有人都欢呼起来！(。这很难解释，请参阅下面的代码和示例图像。

如果有任何建议或例子可以纠正我的观点，我将不胜感激。thx stewy

就是一个很好的例子

}   
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

您可以在偶数.chatlinesdiv元素上使用带有margin-left: auto属性的nth-child选择器。这将使chatlines中的所有其他div元素向右移动。

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