如何用CSS最佳替代聊天气泡定位？

Question

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

您可以看到，我已经尝试过使用float，但是当在父级和子级div之间使用相对/绝对定位时，由于我不知道如何处理高度，所有内容都重叠了。

感谢您的帮助！

P.S .：我正在使用Bootstrap。

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