html - 如何在同一行的相对两侧有两个元素

Question

我正在尝试在“页面”的两端获取两条不同的文本，可以说是移动应用程序。

我希望它看起来像这样:

|-----------------------------|
|DATE                  MESSAGE|

但在同一条线上。

目前我的设置是这样的:

<div id="HASH" class="blue-msg">
<span id="time-HASH" class="smalltext">9 months 2 weeks ago</span>
<span class="ios-circle">MESSAGE HERE</span>
</div>

在 ios-circle span 中设置了 display: inline-block。

MESSAGE 也可以持续多行(如 iOS 聊天窗口)，如下所示:

|-----------------------------|
|DATE                  MESSAGE|
|                      MESSAGE|

我不关心 DATE 文本是靠近消息顶部对齐还是靠近消息中心对齐。我觉得两者都不错。

我该怎么做？如果可能的话，我非常希望不要使用 float 。

Answer 1

像这样使用flexbox

#HASH {
  display: flex;
  justify-content: space-between;
}

P.S.:如果“MESSAGE HERE”的内容要扩展到多行，我会把它放在一个 div 中(而不是 span)并限制它的宽度到 50%(根据需要调整值)。

#HASH {
  display: flex;
  justify-content: space-between;
}

<div id="HASH" class="blue-msg">
<span id="time-HASH" class="smalltext">9 months 2 weeks ago</span>
<span class="ios-circle">MESSAGE HERE</span>
</div>