我试图在“页面”的两端获得两个不同的文本,可以说是一个移动应用程序。
我希望它看起来像这样:
|-----------------------------|
|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|
我不关心日期文本是靠消息顶部对齐还是靠消息中心对齐。在我看来这两个都没问题。
我该怎么做呢?如果可能的话,我非常希望不使用浮点数。
发布于 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>
发布于 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,但这只是另一种解决方案。
发布于 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
}
https://stackoverflow.com/questions/40091515
复制相似问题