如何在不使用绝对位置的情况下从右侧阻止div的宽度扩展

Question

我想创建一个div元素，当我们在其中添加任何内容时，它只从左侧展开。

<div 
id="sent_message"
style='background-color: #2b89cc; color: white; font-family: Arial,Helvetica, sans-serif; margin-top: 10px; display: inline-block; max-width: 50%; min-width: 20%; font-size: 25px; border-radius: 5px; word-wrap: break-word; position: relative; right: -1360;'>
<p>Hello</p>
</div>

我不想将position:absolute用于此作业。有没有办法从右边阻止div的扩展？我会很高兴得到答案的。

Answer 1

使用float:right

window.setTimeout(function(){
document.querySelector('#sent_message p').innerHTML = 'Hello World, welcome!';
}, 1000);

#sent_message {
background-color: #2b89cc;
color: white;
font-family: Arial, Helvetica, sans-serif;
margin-top: 10px;
display: inline-block;
max-width: 50%;
min-width: 20%;
font-size: 25px;
border-radius: 5px;
word-wrap: break-word;
position: relative;
float: right;
}

<div id="sent_message">
<p>Hello</p>
</div>