如何将我的 div 对齐到每个元素容器的右侧？

Question

祝你一切顺利。

是否可以将我的 div 对齐到容器中的右侧？我尝试使用对齐功能，但似乎不起作用。可能吗？

请注意，对齐解决方案应该仅适用于 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

这是你想要的吗？

我没有更改 bubble class 的默认行为。因为 bubble 是 position: absolute 我创建了一个额外的 class 命名为 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>

Answer 2

您可以定义新的 class 并在您想要的每个气泡中使用它

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

如何将我的 div 对齐到每个元素容器的右侧？

How to align my div to the right side of container per element?

html

css

alignment