Позиционирование div для сообщения чата

Я хочу создать компонент чата таким образом, что если я покажу все его элементы, он будет выглядеть следующим образом:

и если я удалю большинство элементов, сообщение будет отображаться следующим образом:

Позиционирование div для сообщения чата

Однако мой код имеет 4 проблемы:

изображение и элемент пузыря не находятся рядом друг с другом
речевой пузырь не становится короче с меньшим количеством текста;
текст в пузыре центрируется не по вертикали на родительском элементе div, а на верхнем родительском контейнере;
элемент дневного времени остается фиксированным справа, а не выравнивается по правой стороне речевого пузыря.

Я пробовал много вариантов, но чем больше я касаюсь CSS, тем больше проблем я создаю.

Любое предложение о том, как достичь желаемого результата?

Это мой код:

.container {
  position: relative;
  margin-left: 5%;
  max-width: 90%;
  height: auto;
}

.upper-text {
  width: 100%;
  color: black;
  font-size: 12px;
  line-height: 120%;
}

.message-container {
  width: auto;
}

.character-picture {
  width: 30px;
  height: 30px;
  background-color: aqua;
  display: inline-block;
}

.buble-wrapper {
  max-width: 75%;
  height: auto;
}

.speech-bubble {
  background-color: #f0f0f0;
  border-radius: 0 20px 20px 20px;
  width: auto;
  min-height: 40px;
}

.message {
  color: black;
  font-size: 16px;
  padding-left: 4%;
  padding-right: 4%;
  top: 50%;
  transform: translateY(-50%);
}

.lower-tex {
  color: black;
  font-size: 12px;
  line-height: 120%;
  text-align: right;
}

<div class = "container">
    <div class = "upper-text">Name</div>
    <div class = "message-container">
      <div class = "character-picture"></div>
      <div class = "buble-wrapper">
        <div class = "speech-bubble">
          <div class = "message">text message</div>
        </div>
      </div>
    </div>
    <div class = "lower-tex">Monday: 20:38</div>
  </div>

css

14.03.2019 17:44

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

371

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Это должно делать то, что вы ищете. Есть много возможностей для улучшения, но это поможет вам начать.

Я удалил часть HTML-кода, который я считал ненужным, и изменил размер и размещение некоторых элементов.

Я предлагаю вам взглянуть на CSS Flexbox и Grid, они позволяют вам делать такие сложные макеты на одном дыхании.

.container {
  width: auto;
  max-width: 250px;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.upper-text {
  color: black;
  font-size: 12px;
  align-self: flex-start;
  line-height: 1.5;
}

.message-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.character-picture {
  width: 30px;
  height: 30px;
  background-color: aqua;
  margin-right: 10px;
  border-radius: 15px;
  flex-shrink: 0;
}

.message {
  color: black;
  font-size: 16px;
  word-wrap: break-word;
  padding: 5px 10px;
  border-radius: 15px;
  background-color: #ccc;
  display: flex;
  align-items: center;
}

.lower-tex {
  color: black;
  font-size: 12px;
  align-self: flex-end;
  line-height: 2.5;
}

<div class = "container">
    <div class = "upper-text">Name</div>
    <div class = "message-container">
      <div class = "character-picture"></div>
      <div class = "message">text message example wow this text wraps very well</div>
    </div>
    <div class = "lower-tex">Monday: 20:38</div>
  </div>

спасибо, @DoHn, как насчет поддержки Grid и Flexbox браузерами?

— 14.03.2019 18:32

Конечно, это нужно учитывать. Но если вы создаете чат, вам, вероятно, в любом случае понадобятся другие последние функции, такие как WebSockets и так далее. Это вопрос того, что вы думаете о своей цели. Создание макета чата исключительно с использованием плавающих элементов и других функций, совместимых со старыми браузерами, намного более громоздко и иногда не стоит того, но если вам это нужно, вперед!

— 14.03.2019 18:35

14.03.2019 18:16

Как упоминал DoHn, вы можете добиться этого, используя flex или grid. Ниже приведено решение с использованием сетки. Подробнее читайте здесь полная направляющая сетка

Чтобы получить поддержку браузера, оформите заказ https://caniuse.com/#search=grid.

.container {
  display: grid;
  grid-template-columns: 30px auto;
  grid-gap: 2px 4px;
  width: 360px;
}

.upper-text {
  color: black;
  font-size: 12px;
  line-height: 120%;
  grid-column: 1 / 3;
  grid-row: 1;
}

.message-container {
  width: auto;
}

.character-picture {
  width: 30px;
  height: 30px;
  background-color: aqua;
  border-radius: 50%;
  grid-row: 2;
}

.speech-bubble {
  background-color: #f0f0f0;
  border-radius: 0 20px 20px 20px;
  grid-column: 2 / 3;
  grid-row: 2;
  justify-self: stretch;
  display: grid;
  padding: 10px;
}

.message {
  margin: auto 0;
}

.lower-text {
  color: black;
  font-size: 12px;
  line-height: 120%;
  justify-self: end;
  grid-column: 2 / 3;
  grid-row: 3;
}

<div class = "container">
  <div class = "upper-text">Name</div>
  <div class = "character-picture"></div>
  <div class = "speech-bubble">
    <div class = "message">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley o</div>
  </div>
  <div class = "lower-text">Monday: 20:38</div>
</div>

как сделать пузырь короче, если сообщение состоит всего из нескольких слов? (например, «Лорем Ипсум»)

— 14.03.2019 22:22

Обновление justify-self: start; для класса речи пузырь

— 15.03.2019 06:48

да, это работает, но нижний текстовый элемент не следует за более коротким пузырем и остается в крайнем правом углу сетки. Итак, вопрос на самом деле заключается в том, как нам сократить пузырь и сделать так, чтобы нижний текст оставался выровненным с ним?

— 15.03.2019 11:19

14.03.2019 18:47

.container {
  width: 500px;
  height: 100px;
  padding: 10px;
}

.container .chat-log {
  width: 500px;
  height: 100px;
  margin-top: 20px;
}

.left-side {
  width: 20%;
  height: auto;
  float: left;
}

.right-side {
  width: 80%;
  height: auto;
  position: relative;
  left: -15px;
  float: right;
}

.text {
  font-size: 14px;
  text-align: center;
}

.thumbnail {
  width: 50px;
  height: 50px;
  background: #000;
  border-radius: 50%;
  clear: both;
  margin: 0 auto;
  position: relative;
}

.thumbnail span.caption {
  color: #fff;
  text-align: center;
  position: relative;
  margin: 0;
  padding: 0;
  top: 30%;
  left: 10%;
}

.msg {
  position: relative;
  width: auto;
  height: auto;
  text-align: justify;
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 0px 20px 20px;
}

.msg::before {
  content: " ";
  position: absolute;
  bottom: 79%;
  transform: rotate(90deg);
  left: -20px;
  border-width: 10px;
  border-style: solid;
  border-color: #f0f0f0 transparent transparent transparent;
}

.time{
  float: right;
  margin-right:10px;
  font-size: 12px;
}

<div class = "container">
  <div class = "chat-log">
    <div class = "left-side">
      <div class = "text">
        Name
      </div>
      <div class = "thumbnail">
        <span class = "caption">image</span>
      </div>
    </div>
    <div class = "right-side">
      <div class = "msg">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum tempore           inventore architecto a voluptatum ratione, sunt doloribus nobis iure             debitis? Veniam.
      </div>
      <div class = "time">Monday 5:13 PM</div>
    </div>
  </div>
</div>

Я надеюсь, что это поможет вам. Я не использую flexbox или сетку, я сделал это просто.

14.03.2019 20:54