Почему мое сообщение пользователя не отображается вправо, несмотря на установку "right: 0px" ;?

Я хотел бы поместить сообщение пользователя справа от поля, но это не работает.

Как я могу это сделать?

Вот небольшой, легко воспроизводимый пример, позволяющий оценить ситуацию.

/*** 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 может помочь в этой ситуации. Но пока мне даже коробку не удается поставить правильно, поэтому мои эксперименты на данном этапе заблокированы.

Текст с выравниванием по правому краю: text-align: right;

Daniel W. 10.08.2018 16:56
1
1
43
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>
Ответ принят как подходящий

Попробуйте использовать align-self: flex-end;

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

Другие вопросы по теме