希望你一切顺利。
是否可以将我的div与容器中的右侧对齐？我尝试使用align函数，但似乎不起作用。有可能吗？
注意，对齐解决方案应该只针对div（chatline）和HTML代码，因为我需要另一个div来对齐（chatline）在右边或左边等，所以请不要在hold容器上使用CSS对齐。
任何帮助都将在这里感激不尽。谢谢Yummi
null
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>null
你可以定义一个新的类，并在你想要的每个气泡中使用它
.right_chat {
right:0;
}
另一个建议id只对一个元素使用，因此在我的代码中，我将它更改为class，并在html代码中使用它
null
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>
这就是你想要的吗？
我没有更改bubble类的默认行为。因为bubble是position:absolute，所以我创建了一个名为right的额外类，您可以将它添加到希望在右侧对齐的每个bubble上。
null
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>
试试这个。。。
null
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 {
width: 400px;
padding: 15px;
padding-top: 5px;
border-radius: 0px 0px 30px 30px;
background-color: rgba(0, 0, 0, .4);
display: grid;
grid-template-columns: 500px;
}
.chatbox-container {
display: grid;
grid-template-columns: repeat(2, auto);
grid-template-areas: "left-side right-side";
height: 200px;
}
.left-side {
grid-area: left-side;
}
.right-side {
grid-area: right-side;
}
.bubble {
/* position: absolute; */
max-width: 200px;
height: 10px;
padding: 15px;
padding-top: 10px;
border-radius: 0px 30px 30px 30px;
background-color: rgba(0, 0, 0, .3);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="chatbox">
<div class="chatbox-container">
<p class="bubble right-side" id="chattext">This should be right > please use htnl code on this div to align</p>
<p style="margin-top:70px;" class="bubble left-side" id="chattext">stay left</p>
</div>
</div>
</body>
</html>