如何让div适合其内容并向右对齐?

Question

我想做一个简单的聊天应用程序，似乎不能显示属于一个用户的聊天文本粘在左边，而另一个用户的消息粘在右边。

下面是一个示例代码:

.chat-session {
width: 400px;
height: 400px;
border: 1px solid #aaaaaa;
padding: 1%;
}
.user1 {
padding: 0 2px 2px 2px;
border: 1px solid #09aedc4f;
border-radius: 3px;
background-color: #09aedc4f;
margin-bottom: 2px;
}
.user2 {
padding: 0 2px 2px 2px;
text-align: right;
border: 1px solid rgba(0, 128, 0, 0.493);
background-color: rgba(0, 128, 0, 0.493);
margin-bottom: 2px;
border-radius: 3px;
}

<div class="chat-session">
<div class="user1">Hello</div>
<div class="user2">Hi</div>
<div class="user1">What's up?</div>
<div class="user2">Not much</div>
</div>

我想div适合文本大小和user2的div右对齐。我已经尝试过display: inline-block;来适应div，但这只是在同一行上显示它们。我也试过float: right;和float: left;，但这也显示在同一行。

有人能帮忙吗?

Answer 1

您可以使用display与表格布局算法来收缩元素到其内容，然后max-width和margin-left:auto

.chat-session {
width: 400px;
height: 400px;
border: 1px solid #aaaaaa;
padding: 1%;
}
.chat-session>* {/* Update */
display: table;/* for infos : okay with any browser for ages and only from IE8 for MSIE */
max-width: 100%;
}
.user1 {
padding: 0 2px 2px 2px;
border: 1px solid #09aedc4f;
border-radius: 3px;
background-color: #09aedc4f;
margin-bottom: 2px; 
}
.user2 {
padding: 0 2px 2px 2px;
text-align: right;
border: 1px solid rgba(0, 128, 0, 0.493);
background-color: rgba(0, 128, 0, 0.493);
margin-bottom: 2px;
border-radius: 3px;
margin-left: auto/* Update */
}

<div class="chat-session">
<div class="user1">Hello</div>
<div class="user2">Hi</div>
<div class="user1">What's up?</div>
<div class="user2">Not much</div>
<div class="user1">What's up? What's up? What's up? What's up? What's up if there a long text here?</div>
<div class="user2">Not much</div>
</div>

Answer 2

你可以把你的message标签放到另一个具有text-align属性的标签中

.chat-session {
width: 400px;
height: 400px;
border: 1px solid #aaaaaa;
padding: 1%;
}
.user1 {
display:inline;
padding: 0 2px 2px 2px;
border: 1px solid #09aedc4f;
border-radius: 3px;
background-color: #09aedc4f;
margin-bottom: 2px;
}
.user2 {
display:inline;
padding: 0 2px 2px 2px;
border: 1px solid rgba(0, 128, 0, 0.493);
background-color: rgba(0, 128, 0, 0.493);
margin-bottom: 2px;
border-radius: 3px;
}
.message-right{
position: relative;
width: 100%;
text-align: right;
}
.message-left{
position: relative;
width: 100%;
text-align:left;
}

<div class="chat-session">
<div class="message-left"><div class="user1">Hello</div></div>
<div class="message-right"><div class="user2">Hi</div></div>
<div class="message-left"><div class="user1">What's up?</div></div>
<div class="message-right"><div class="user2">Not much</div></div>
</div>