我有這個聊天，我正在嘗試將樣式應用于"chat-c??ontainer"。
訊息與 Angular 一起顯示*ngFor如下：
<p *ngFor="let m of messageArray" [ngClass]="this.currentUser.user._id==m.src?'self pr-3':'otherUser pl-3'">
{{m.msg}}
</p>
應用的類僅具有float:left或float:right取決于發送每條訊息的用戶。但是，它們始終顯示在左側。
關于如何使訊息浮動到相應的一側有什么建議嗎？
uj5u.com熱心網友回復：
使用彈性盒
<p *ngFor="let m of messageArray" [ngClass]="this.currentUser.user._id==m.src?'self pr-3':'otherUser pl-3'" class='message'>
{{m.msg}}
</p>
在 CSS 上：
.message {
display: flex;
flex-flow: row nowrap;
width: 100%;
}
.self {
align-items: flex-end;
}
.otherUser {
align-items: flex-start;
}
在父 div 上使用寬度來覆寫可用空間。（您可以使用 px 或 % 設定寬度取決于您）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/470971.html
下一篇：如何計算字串串列中每個字串的位數