同じ行の反対側に2つのアイテムを持つ方法

Question

「ページ」の反対側に2つの異なるテキストを表示してモバイルアプリを話そうとしています。

私はそれは次のようになりたいと思います：

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

しかし、同じ行に。 display: inline-blockセットを持つIOS-円スパンで

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

：

は現在、私はそれをこのようなセットアップを持っています。 DATEテキストがメッセージの上部付近や近くで整列されている場合

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

私は気にしない：

MESSAGEもそうのように、（iOSのチャットウィンドウのように）複数行のために行くことができますメッセージの中心。いずれにしても私にはうまく見えます。

どうすればよいですか？可能であれば、フロートを使用しないことを大いに望んでいます。

Answer 1

この

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

などの使用フレキシボックス、PS：メッセージが複数行にまたがって行くことになっている場合は、私が（代わりにスパンの）DIVに入れて、それは50％の幅のrestrictます（値を調整好きなように）。

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

Answer 2

ヨハネス・フレキシボックスのアプローチは、あなたがこのような何かを行うことができ、おそらく最良の方法ですが、ことを使用せずに、またはあなたが要求したとしてフロート：

#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 

}