如何在同一行中将两个项目放在相对的两侧
如何在同一行中将两个项目放在相对的两侧
提问于 2016-10-18 00:38:24
我试图在“页面”的两端获得两个不同的文本，可以说是一个移动应用程序。
我希望它看起来像这样：
|-----------------------------|
|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循环跨度设置了display: inline-block。
消息也可以持续多行(就像iOS聊天窗口一样)，如下所示：
|-----------------------------|
|DATE MESSAGE|
| MESSAGE|我不关心日期文本是靠消息顶部对齐还是靠消息中心对齐。在我看来这两个都没问题。
我该怎么做呢？如果可能的话，我非常希望不使用浮点数。
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-10-18 00:43:56
使用flexbox，如下所示
#HASH {
display: flex;
justify-content: space-between;
}附注:如果"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>
Stack Overflow用户
发布于 2016-10-18 00:46:52
Johannes方法可能是最好的方法，但如果不使用该方法，或者按照您的要求进行浮动，您可以这样做：
<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，但这只是另一种解决方案。
Stack Overflow用户
发布于 2016-10-18 00:53:45
如果你想将它固定在屏幕的底部(或其他)区域，为什么不使用固定定位，例如：
#time-HASH {
position: fixed;
bottom: 0;
left: 0;
}
.ios-circle {
position: fixed;
bottom: 0;
right: 0;
display: inline-block; //if you need this
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40091515
复制相关文章
相似问题