0

希望你一切都好。

是否可以将我的 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>

4

2 回答 2

1

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

.right_chat {
    right:0;
}

另一种建议id更喜欢仅用于一个元素，因此在我的代码中我将其更改为类并在 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>

于 2020-09-26T14:51:32.840 回答
0

这是你想要的吗？

我没有改变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>

于 2020-09-26T14:51:23.797 回答