如何将div向右对齐

Question

这是我的聊天应用程序的图片。我想把潜水器放在右边，但我做不到。我试着把文本对齐，但没有成功。当文本长度较长时，div应固定在右侧。文本可以向左展开。这个div应该像文本对齐中心属性一样工作。这是我的html代码

<div class="container"> 
<div id="chat-cont"> </div> 
<div class="row"><h5>Connection ID : <span id="connectionId"></span></h5></div>
<div class="row"> <div class="col-md-7">
<input type="text" id="sender" value="@ViewBag.message"></div> </div>
<div class="row"> <div class="col-md-7"><input type="text" placeholder="ReceiverId" id="client"></div>
</div> 
<div class="row"> <div class="col-md-7"> <input type="text" id="txtMessage"> 
<button>Send</button></div> </div> </div> 

这是我的js代码

$("button").click(() => { 
let message = $("#txtMessage").val();
var user = $("#sender").val(); 
connection.invoke("ClientSendMessage", $("#client").val(),user, message) .catch(error => console.log("Error." + error));
var div = document.createElement("div"); 
div.textContent = message; 
div.style.fontSize = "20px"; 
div.style.fontFamily = "Josefin Sans, sans-serif";
div.style.paddingLeft = "5px"; 
div.style.paddingRight = "5px"; 
div.style.paddingBottom = "3px"; 
div.style.paddingTop = "3px"; 
div.style.marginLeft = "500px"; 
div.style.marginBottom = "2px"; 
div.style.width = "fit-content"; 
div.style.height = "fit-content"; 
div.style.backgroundColor = "#056162";
div.style.color = "white"; 
div.style.borderRadius = "10px"; 
div.style.border = "1px solid black";
document.getElementById("chat-cont").appendChild(div); }); 

这就是代码的工作方式[潜水器应处于与索具相同的位置][1]

[1]：https://i.stack.imgur.com/nuPWy.png

Answer 1

使用flexbox对齐项目flex-end

.box {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.child{
background-color: #f44336;
color: white;
padding: 14px 25px;
margin: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
}

<div class="box">
<div class="child">Hello</div>
<div class="child">How are you?</div>
<div class="child">What is your favorite lesson?</div>
</div>

Answer 2

.box {
display: flex;
border: solid 1px blue;
justify-content: flex-end;
}
.child {
background-color: #f44336;
color: white;
padding: 24px 25px;
margin: 1vw;
display: inline-block;
border-radius: 50%;
text-decoration: none;
}
.spacer {
display: flex;
flex-direction: column
}

<div class="box">
<div class='spacer'>
<div>
<div class="child">Hello</div>
</div>
<div>
<div class="child">How are you?</div>
</div>
<div>
<div class="child">What is your favorite<br> lesson?</div>
</div>
</div>
</div>