如何將我的 div 與每個元素的容器右側對齊？

Question

希望你一切安好。

是否可以將我的 div 與容器內的右側對齊？ 我嘗試使用 align 函數，但似乎不起作用。 是否可以？

請注意，對齊解決方案應該僅用於 div（聊天線）和 HTML 代碼，因為我需要另一個 div 在右側或左側對齊（聊天線）等，所以請不要在保留容器上使用 CSS 對齊。

任何幫助將不勝感激。 謝謝 Yummi

 body { background-color: #6B6B6B; margin: 50px; font-family: Arial; color: darkgrey; font-size: 14px; line-height: .3; letter-spacing: .5px; } #chattext { font-family: Arial; color: grey; font-size: 12px; line-height: 1.1; letter-spacing: .5px; } .chatbox { position: absolute; width: 400px; padding: 15px; padding-top: 5px; border-radius: 0px 0px 30px 30px; background-color: rgba(0, 0, 0, .4); grid-template-columns: 500px; display: grid; } .bubble { position: absolute; max-width: 200px; padding: 15px; padding-top: 10px; border-radius: 0px 30px 30px 30px; background-color: rgba(0, 0, 0, .3); }

 <div class="chatbox"> <div style="height:200px"> <p class="bubble" id="chattext">This should be right > please use htnl code on this div to align</p> <p style="margin-top:70px;" class="bubble" id="chattext">stay left</p> </div> </div>

Answer 1

您可以定義新類並在您希望它正確的每個氣泡中使用它

.right_chat {
    right:0;
}

另一個建議id更喜歡僅用於一個元素，因此在我的代碼中，我將其更改為 class 並在 html 代碼中使用它

 body { background-color: #6B6B6B; margin: 50px; font-family: Arial; color: darkgrey; font-size: 14px; line-height: .3; letter-spacing: .5px; } .chattext { font-family: Arial; color: grey; font-size: 12px; line-height: 1.1; letter-spacing: .5px; } .right_chat { right:0; } .chatbox { position: absolute; width: 400px; padding: 15px; padding-top: 5px; border-radius: 0px 0px 30px 30px; background-color:rgba(0, 0, 0, .4); grid-template-columns: 500px; display: grid; } .bubble { position: absolute; max-width:200px; padding: 15px; padding-top: 10px; border-radius: 0px 30px 30px 30px; background-color:rgba(0, 0, 0, .3); }

 <div class="chatbox"> <div style="height:200px"><p class="bubble chattext right_chat" id="">This should be right > please use htnl code on this div to align</p><p style="margin-top:70px;" class="bubble chattext">stay left</p></div> </div>

Answer 2

這是你想要的嗎？

我沒有改變bubble類的默認行為。 由於bubble是position: absolute我創建了一個名為right額外類，您可以將其添加到要在右側對齊的每個bubble上。

 body { background-color: #6B6B6B; margin: 50px; font-family: Arial; color: darkgrey; font-size: 14px; line-height: .3; letter-spacing: .5px; } #chattext { font-family: Arial; color: grey; font-size: 12px; line-height: 1.1; letter-spacing: .5px; } .chatbox { position: absolute; width: 400px; padding: 15px; padding-top: 5px; border-radius: 0px 0px 30px 30px; background-color:rgba(0, 0, 0, .4); grid-template-columns: 500px; display: grid; } .bubble { position: absolute; max-width:200px; padding: 15px; padding-top: 10px; border-radius: 0px 30px 30px 30px; background-color:rgba(0, 0, 0, .3); } .message-wrapper .bubble.right { right: 0; }

 <div class="chatbox"> <div class="message-wrapper" style="height:200px"> <p class="bubble right" id="chattext">This should be right > please use htnl code on this div to align</p> <p style="margin-top:70px;" class="bubble" id="chattext">stay left</p> </div> </div>