如何最好地使用 CSS 交替定位聊天气泡？

Question

我正在使用的代码部分如下所示，它显示了左侧的所有气泡，即用户“朋友”或用户“自己”发送的气泡。

正如你所看到的，我已经尝试过使用浮动，但是当在父和子 div 之间使用相对/绝对定位时，一切都被重叠了，因为我不知道如何处理高度。

在此先感谢您的帮助！

PS：我正在使用引导程序。

                    <div class="row no-gutters">
                        <div class="chat-bubble-container ">
                            <div class="chat-bubble msg-self">
                                Lorem ipsum!
                            </div>
                        </div>
                    </div>
                    <div class="row no-gutters">
                        <div class="chat-bubble-container">
                            <div class="chat-bubble msg-friend">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste nisi, odit ut nemo placeat labore, eligendi adipisci!
                            </div>
                        </div>
                    </div>



.chat-bubble-container {
  width: auto;
}

.chat-bubble {
  font-size: 1.4rem;
  padding: 1rem 1.4rem;
  margin: 1rem 3rem;
  border-radius: .9rem;
}

.msg-friend {
  color: white;
  background-color: grey;
}

.msg-self {
  color: white;
  background-color: pink;
}

Answer 1

您可以使用margin-left: auto; 和margin-right: auto; 属性来实现该布局。

 .chat-bubble-container { display: flex; width: 100%; } .chat-bubble { font-size: 1.4rem; padding: 1rem 1.4rem; margin-top: 1rem; margin-bottom: 1rem; border-radius: .9rem; width: auto; max-width: 300px; } .msg-friend { color: white; background-color: grey; margin-left:3rem; margin-right: auto; } .msg-self { color: white; background-color: pink; margin-right:3rem; margin-left: auto; }

 <div class="row no-gutters"> <div class="chat-bubble-container "> <div class="chat-bubble msg-self"> Lorem ipsum! </div> </div> </div> <div class="row no-gutters"> <div class="chat-bubble-container"> <div class="chat-bubble msg-friend"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste nisi, odit ut nemo placeat labore, eligendi adipisci! </div> </div> </div>