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

Question

我正在使用的代码部分如下所示，它在左侧显示了所有气泡，即用户 "friend" 或用户 "self" 发送的气泡。

如您所见，我已经尝试使用 float，但是当在父子 div 之间使用 relative/absolute 定位时，一切都被重叠了，因为我不知道如何处理高度。

在此先感谢您的帮助！

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>

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

How to best alternate chat bubbles positioning with CSS?

html

css

message

chat

css-float