如何在同一條線上的兩側有兩個項目

我試圖在「頁面」的相對兩端獲取兩段不同的文本，以便說出移動應用程序。如何在同一條線上的兩側有兩個項目

我想它看起來就像這樣：

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

如何在同一條線上的兩側有兩個項目

回答

相關問題