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

Question

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

我将非常感谢任何建议或示例来纠正我的对齐方式。 thx 炖

这里的好例子

 } 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 元素上使用带有margin-left: auto属性的nth-child选择器。 这将使聊天线内的所有其他 div 元素向右移动。

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