Question

我想将用户消息放在框的右边，但是它不起作用。

我该怎么做？

这里有一个小巧，易于复制的示例，使您可以欣赏情况。

/*** messages ***/ 
.messages_flow{ 
    grid-area: messages_flow; 
    width: 70%; 
    border: solid; 
    border-color: black;
    max-height: 10em; 
    overflow-y: scroll;
    margin: auto;
    display:flex; 
    flex-direction : column; 
    align-items: end; 
    justify-content: center;
    background-color: white;  
    padding: 10px; 
}

.user_message{ 
    right: 0px;
    border : solid; 
    border-color : grey;  
    max-width : 90%;  
    word-wrap: break-word;
}

<div class="messages_flow">
New message
  <div class="user_message">
   Hello
  </div>
</div>

此外，根据文本框将在右侧的事实，我将使文本从右到左填充该框。我认为flexbox可以帮助解决这种情况。但是就目前而言，我什至没有成功将框放到正确的位置，因此目前在此步骤中我的实验被阻止了。

Answer 1

尝试使用align-self: flex-end;

.user_message{ 
    right: 0px;
    border : solid; 
    border-color : grey;  
    max-width : 90%;  
    word-wrap: break-word;
    align-self: flex-end;
}

Answer 2

要在此处使用right，您需要使用position: absolute

/*** messages ***/ 
.messages_flow{ 
    grid-area: messages_flow; 
    width: 70%; 
    border: solid; 
    border-color: black;
    max-height: 10em; 
    overflow-y: scroll;
    margin: auto;
    display:flex; 
    flex-direction : column; 
    align-items: end; 
    justify-content: center;
    background-color: white;  
    padding: 10px; 
    position: relative; // <---- to make your child div relative to this div
}

.user_message{ 
    position: absolute;
    right: 0px;
    border : solid; 
    border-color : grey;  
    max-width : 90%;  
    word-wrap: break-word;
}

<div class="messages_flow">
New message
  <div class="user_message">
   Hello
  </div>
</div>

尽管设置了“ right：0px”，为什么我的用户消息仍然不正确？

2 个答案: