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;）。但是，浮动似乎并没有改变元素的位置。

.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规则，并结合the 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>

CSS-浮动不起作用

2 个答案: