如何在同一行的相对两侧具有两个项目 [英] How to have two items on opposite sides on the same line

问题描述

我正在尝试在页面"的相对两端获得两个不同的文本，以便说出一个移动应用程序.

I'm trying to get two different pieces of text on opposite ends of the "page" so to speak for a mobile app.

我希望它看起来像这样:

I would like it to look like this:

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

但是在同一行.

目前，我已经按照以下步骤进行了设置:

Currently I've got it setup like this:

<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>

设置了display: inline-block的ios圆跨度.

With the ios-circle span having display: inline-block set.

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

MESSAGE can also go on for multiple lines (like an iOS chat window), like so:

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

我不在乎DATE文本是在邮件顶部附近还是在邮件中心附近对齐.在我看来，任何一个都很好.

I don't care if the DATE text is aligned near the top of the message or near the center of the message. Either would look fine to me.

我该怎么做?如果可能的话，我非常希望不要使用浮点数.

How do I do this? I would very much prefer to not use a float if possible.

推荐答案

像这样使用flexbox

Use flexbox, like this

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

PS:如果"MESSAGE HERE"内容应该跨多行扩展，则将其放在div(而不是span)中，并将其宽度限制为50％(根据需要调整值)

P.S.: If the "MESSAGE HERE" content is supposed to expand across multiple lines, I would put it in a div (instead of span) and restrict its width to 50% (adjust value as you like).

#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>

这篇关于如何在同一行的相对两侧具有两个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！