Как иметь два предмета на противоположных сторонах в одной строке

Question

Я пытаюсь получить два разных фрагмента текста на противоположных концах «страницы», так сказать, для мобильного приложения.

Я хотел бы, чтобы выглядеть следующим образом:

|-----------------------------| 
|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 набора.

MESSAGE может также продолжаться несколько строк (например, в окне чата IOS), так как:

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

Я не волнует, если текст DATE совмещен в верхней части сообщения или недалеко от центр сообщения. Либо мне будет хорошо.

Как это сделать? Я бы предпочел не использовать поплавок, если это возможно.

Answer 1

Использование Flexbox, как этот

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

PS: Если MESSAGE должен идти на несколько строк, я бы поставил его в 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>

Answer 2

Johannes 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, но это просто альтернативное решение.

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 

}