时间戳

首页 > 解决方案 > 如何修复聊天框中的 div 对齐？

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

问题描述

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

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

这里的好例子

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

标签： htmlcssalignmenttext-alignmentdivide

解决方案

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

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

推荐阅读