CSS-float不应用任何效果

Question

我有一个消息列表，通过它我循环并根据条件应用样式：

<div class="parent">
<div *ngFor="let msg of allMessages" class="message">
<div [ngClass]="(msg.sender === currentUID) ? 'me' : 'you'">
<div>{{msg.sender}}</div>
<div>{{msg.message}}</div>
<div>{{msg.date | date:'HH:mm'}}</div>
</div>
</div>
</div>

我希望所有"我"风格的消息都在右边(float:right;(，所有"你"风格的信息都在左边(float:left;(。然而，float似乎不会改变元素的位置。

.parent {
position: relative; 
display: flex; 
flex-direction: column;
}
.message {
display: flex;
padding: 1% !important;
padding-left: 3% !important;
margin: 0px !important;
}
.me {
float: right;
overflow: hidden;
padding: 5px;
background-color: blue;
border-radius: 10px !important;
}
.you {
float: right;
overflow: hidden;
padding: 5px;
background-color: green;
border-radius: 10px !important;
}

有人能指出我的错误在哪里吗？作为一个css新手，一个简短的解释会对我有很大帮助。非常感谢。

Answer 1

另一种方法可能是使用float规则，结合clearfix技术来实现左/右对齐。

这可以让您更好地控制message<div>的水平宽度，例如，这可能对聊天风格的屏幕布局有用。

要实现这一点，请尝试以下CSS：

.parent {
position: relative; 
/*display: flex;  Removed
flex-direction: column; Removed*/
}
.message {
/*display: flex; Removed*/
padding: 1% !important;
padding-left: 3% !important;
margin: 0px !important;
}
/* Add this, known as "clearfix" */
.message:after {
content: "";
display: table;
clear: both;
}
.me {
float: right;
overflow: hidden;
padding: 5px;
background-color: blue;
border-radius: 10px !important;
}
.you {
float: left; /*Update to left*/
overflow: hidden;
padding: 5px;
background-color: green;
border-radius: 10px !important;
}
/* Added as an optional extra to show how the width of .me,.you can be controlled */
.you, .me {
width:25%;
background:#ccc;
}

Answer 2

我不确定flex的使用总体上对您的应用程序有多重要，但您应该能够在没有flex的情况下实现这种布局。

如果你试图获得聊天历史记录，根据消息来自谁，消息会出现在屏幕的左右两侧，有一种方法可能是这样的：

.parent {
position: relative; 
/*display: flex;  Removed
flex-direction: column; Removed*/
}
.message {
/*display: flex; Removed*/
padding: 1% !important;
padding-left: 3% !important;
margin: 0px !important;
}
.me {
/*float: right; Removed */
text-align:right; /* Added */
overflow: hidden;
padding: 5px;
background-color: blue;
border-radius: 10px !important;
}
.you {
/*float: right;*/
text-align:left; /* Added */
overflow: hidden;
padding: 5px;
background-color: green;
border-radius: 10px !important;
}

此外，您可以通过这种方式使用ngClass来使CSS类分配的行为更加明确：

<div [ngClass]="{ 'me' : (msg.sender === currentUID), 'you' : (msg.sender !== currentUID) }">
<div>{{msg.sender}}</div>
<div>{{msg.message}}</div>
<div>{{msg.date | date:'HH:mm'}}</div>
</div>