Question

我试图在＆＃34;页面＆＃34;的另一端获得两个不同的文本。所以说一个移动应用程序。

我希望它看起来像这样：

|-----------------------------|
|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文本是在消息顶部附近还是在消息中心附近对齐。要么对我来说都很好。

我该怎么做？如果可能的话，我更愿意不使用浮动。

Answer 1

使用flexbox，就像这样

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

P.S。：如果＆＃34; MESSAGE HERE＆＃34;内容应该扩展到多行，我会将其放在div（而不是span）中并将其宽度限制为50％（根据需要调整值）。

＆＃13;

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

＆＃13;

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

＆＃13;

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，但这只是一种替代解决方案。

Answer 3

如果您希望将其固定在屏幕的底部（或其他）区域，为什么不使用固定定位，例如：

#time-HASH {
position: fixed;
bottom: 0;
left: 0;
}

.ios-circle {
position: fixed;
bottom: 0;
right: 0;
display: inline-block; //if you need this

}

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

3 个答案: