Как добиться в стилях или css макете Whatsapp ChatBubble специально на их метке времени

Question

введите описание изображения здесь

Извините за отсутствие кода. Я хочу добиться стиля временной метки Whatsapp chatbubble в React Native .

Как вы можете видеть в первых двух сообщениях, поскольку они не такие длинные, временная метка в конец прилипает к сообщению, которое немного опускается.

Но временная метка последних двух сообщений находится под текстом чата, так как текст теперь длиннее.

Я пытался добиться этого, используя Flexbox и поместив flexWrap: 'wrap' в облачко чата и alignSelf: 'flex-end 'в текст временной метки, но это не помогло.

Как я могу этого добиться?

Answer 1

Только что создал контейнер сообщения и отметки времени inline-block. Примерно так:

.container {
  background-color:#666;
  width:400px;
  text-align:right;
  padding:20px;
}
.chat {
  display:inline-block;
  padding:10px 20px;;
  background-color:lime;
  margin-bottom:10px;
}
span {
  display:inline-block;
  vertical-align:top;
  }
.time {
  font-weight:bold;
  padding-top:4px;
  }

<div class="container">
  <div class="container-chat">
    <div class="chat">
      <span>this is the msg</span>
      <span class="time">time</span>
    </div>
  </div>
  <div class="container-chat">
    <div class="chat">
      <span>this is the msg longer</span>
      <span class="time">time</span>
    </div>
  </div>
  <div class="container-chat">
    <div class="chat">
      <span>this is the msg much, much longer</span>
      <span class="time">time</span>
    </div>
  </div>
  <div class="container-chat">
    <div class="chat">
      <span>this is the msg much, much, much, much, much longer</span>
      <span class="time">time</span>
    </div>
  </div>
  <div class="container-chat">
    <div class="chat">
      <span>this is the msg much, much, much, much, much, much, much, much longer</span>
      <span class="time">time</span>
    </div>
  </div>
</div>