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

您可以将nth-child选择器与偶数margin-left: auto div元素上的.chatlines属性一起使用。可使聊天行中的所有其他div元素向右移动。

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

如何在聊天框中修复div对齐方式？

1 个答案: