如何在同一条线的两侧有两个项目

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跨度的display: inline-block设定.

MESSAGE也可以用于多行(如iOS聊天窗口),如下所示:

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

我不在乎DATE文本是在邮件顶部附近还是在邮件中心附近对齐.要么对我来说都很好看.

我该怎么做呢？如果可能的话,我更倾向于不使用浮子.

Answer 1

像这样使用flexbox

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

PS:如果"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>

Answer 2

Johannes Flexbox 方法可能是最好的方法，但如果不使用它，或者按照您的要求浮动，您可以执行以下操作：

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

进而：

#HASH {
  width: 100%;
}

#HASH div {
  width: 49%;
  display: inline-block;
}

#right {
  text-align: right;
}

https://jsfiddle.net/ak7zxz84/

同样，我会选择 Flexbox，但这只是一个替代解决方案。