html - div不能并排放置

本质上，我有一些短信气泡。我想分别将日期和时间放在气泡旁边，但它们似乎没有放在正确的位置。如您所见，蓝色文本气泡的日期显示在气泡的右侧，而灰色气泡的文本显示在气泡的左侧。

我希望它看起来如何



看起来如何



有人可以帮我这个忙。我很困扰

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
.chat {
  width: 320px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Roboto', sans-serif;
}

p {
  margin: 0.5em 0em;
}

.them-bubble {
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0px 16px;
  background: #e5e5ea;
  max-width: 75%;
  clear: both;
  position: relative;
  float: left;
}

.them-bubble::after  {
  content: "";
  position: absolute;
  left: -0.5em;
  bottom: 0;
  width: 0.5em;
  height: 1em;
  border-right: 0.5em solid #e5e5ea;
  border-bottom-right-radius: 1em 0.5em;
}

.me-bubble {
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0px 16px;
  max-width: 75%;
  clear: both;
  position: relative;
  float: right;
  float: right;
  background-color: #1289fe;
  color: white;
}

.me-bubble::after  {
  content: "";
  position: absolute;
  right: -0.5em;
  bottom: 0;
  width: 0.5em;
  height: 1em;
  border-left: 0.5em solid #1289fe;
  border-bottom-left-radius: 1em 0.5em;
}

.me-date {
    color: #98979c;
    font-size: 12px;
    font-weight: 700;
    width: 65px;
    float: right;
}

.them-date {
    color: #98979c;
    font-size: 12px;
    font-weight: 700;
    width: 65px;
    float: left;
}

<div class="chat">

    <div class="message">
        <div class="me-date">22/11/19 11:42 PM</div>
        <div class="me-bubble">
            <p>Hello how are you</p>
        </div>
    </div>

    <div class="message">
        <div class="them-date">22/11/19 11:43 PM</div>
        <div class="them-bubble">
            <p>I am good, how are you?</p>
        </div>
    </div>

    <div class="message">
        <div class="me-date">22/11/19 11:44 PM</div>
        <div class="me-bubble">
            <p>I am fantastic. This is a long message so the bubble goes down into another couple lines. Typing more text here</p>
        </div>
    </div>

    <div class="message">
        <div class="them-date">22/11/19 11:43 PM</div>
        <div class="them-bubble">
            <p>This is a really long reply so the messahe makes multiple bubbles. More typing here</p>
        </div>
    </div>

    <div class="message">
        <div class="them-date">22/11/19 11:46 PM</div>
        <div class="them-bubble">
            <p>Double sending them message</p>
        </div>
    </div>

    <div class="message">
        <div class="them-date">22/11/19 11:46 PM</div>
        <div class="them-bubble">
            <p>Triple sending them message and this is a double long bubble</p>
        </div>
    </div>

</div>

最佳答案

使用flexbox和五个样式规则，可以创建以下效果：

/* New Code */

.message {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.message .me-date {
  order: 2;
}

.message .me-bubble {
  margin-left: auto;
}

.message .me-date {
  text-align: right;
}

.message .me-bubble,
.message .them-bubble {
  max-width: 200px;
}

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
.chat {
  width: 320px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Roboto', sans-serif;
}

p {
  margin: 0.5em 0em;
}

.them-bubble {
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0px 16px;
  background: #e5e5ea;
  max-width: 75%;
  clear: both;
  position: relative;
  float: left;
}

.them-bubble::after {
  content: "";
  position: absolute;
  left: -0.5em;
  bottom: 0;
  width: 0.5em;
  height: 1em;
  border-right: 0.5em solid #e5e5ea;
  border-bottom-right-radius: 1em 0.5em;
}

.me-bubble {
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0px 16px;
  max-width: 75%;
  clear: both;
  position: relative;
  float: right;
  float: right;
  background-color: #1289fe;
  color: white;
}

.me-bubble::after {
  content: "";
  position: absolute;
  right: -0.5em;
  bottom: 0;
  width: 0.5em;
  height: 1em;
  border-left: 0.5em solid #1289fe;
  border-bottom-left-radius: 1em 0.5em;
}

.me-date {
  color: #98979c;
  font-size: 12px;
  font-weight: 700;
  width: 65px;
}

.them-date {
  color: #98979c;
  font-size: 12px;
  font-weight: 700;
  width: 65px;
}

.chat {
  min-width: 400px;
  width: 100%;
}

<div class="chat">

  <div class="message">
    <div class="me-date">22/11/19 11:42 PM</div>
    <div class="me-bubble">
      <p>Hello how are you</p>
    </div>
  </div>

  <div class="message">
    <div class="them-date">22/11/19 11:43 PM</div>
    <div class="them-bubble">
      <p>I am good, how are you?</p>
    </div>
  </div>

  <div class="message">
    <div class="me-date">22/11/19 11:44 PM</div>
    <div class="me-bubble">
      <p>I am fantastic. This is a long message so the bubble goes down into another couple lines. Typing more text here</p>
    </div>
  </div>

  <div class="message">
    <div class="them-date">22/11/19 11:43 PM</div>
    <div class="them-bubble">
      <p>This is a really long reply so the messahe makes multiple bubbles. More typing here</p>
    </div>
  </div>

  <div class="message">
    <div class="them-date">22/11/19 11:46 PM</div>
    <div class="them-bubble">
      <p>Double sending them message</p>
    </div>
  </div>

  <div class="message">
    <div class="them-date">22/11/19 11:46 PM</div>
    <div class="them-bubble">
      <p>Triple sending them message and this is a double long bubble</p>
    </div>
  </div>

</div>

关于html - div不能并排放置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59221920/