html - 如何最好地使用CSS替代聊天气泡定位？(How to best alternate chat bubbles positioning with CSS?)

Question

The section of code that I am using is shown below and it shows all the bubbles on the left side, ie either the one sent by the user "friend" or by the user "self".

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

As you can see, I've tried it with float, but when using relative/absolute positioning between parent and child divs, everything was being overlapped as I did not know what to do with the height.

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

Thanks in advance for your help!

(在此先感谢您的帮助！)

PS: I am using Bootstrap.

(PS：我正在使用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;
}

  ask by Fergo translate from so

Answer 1

You can use margin-left: auto;

(您可以使用margin-left: auto;)

and margin-right: auto;

(margin-right: auto;)

properties to achieve that layout.

(属性以实现该布局。)

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