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

我试图在“页面”的相对两端获取两段不同的文本，以便说出移动应用程序。如何在同一条线上的两侧有两个项目

我想它看起来就像这样：

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

利用具有display: inline-block一套IOS圈跨度。

消息也可以去多行（像iOS的聊天窗口），像这样：

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

我不在乎，如果日期文本靠近讯息或接近顶部对齐消息的中心。要么我看起来很好。

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

来源

2016-10-17 Andrew Alexander

使用Flexbox的，像这样的

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

PS：如果消息是应该多行去，我把它放在一个DIV（而不是跨度），并限制它的宽度设置为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-17 16:43:56 Johannes

优秀，这似乎正是我要找的！我想我已经简要地使用了flexbox，但似乎我应该多检查一下。显得非常有用！当它让我时，我会接受答案。 –

约翰内斯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，但这只是一个替代解决方案。

来源

2016-10-17 16:46:52

如果你想让它固定在底部（或他人）的屏幕面积，为什么不使用固定的定位，如：

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

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

}

来源

2016-10-17 16:53:44 Karen

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

回答

相关问题