Блог

Главная - Вопросы по программированию - Как разместить два элемента на противоположных сторонах в одной строке

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

#html #css

#HTML #css

Вопрос:

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

Я бы хотел, чтобы это выглядело так:

 |-----------------------------|
|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-circle display: inline-block .

СООБЩЕНИЕ также может продолжаться на несколько строк (например, окно чата iOS), например:

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

Мне все равно, выровнен ли текст ДАТЫ в верхней части сообщения или в центре сообщения. Для меня это выглядело бы нормально.

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

Ответ №1:

Используйте flexbox, например

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

PS: Если предполагается, что содержимое «СООБЩЕНИЯ ЗДЕСЬ» должно расширяться на несколько строк, я бы поместил его в 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>

Комментарии:

1. Отлично, кажется, это именно то, что я ищу! Я думаю, что раньше я кратко использовал flexbox, но, похоже, мне стоит проверить это подробнее. Кажется очень полезным! Я приму ответ, когда он мне позволит.

Ответ №2:

Подход Йоханнеса Flexbox, вероятно, является лучшим способом, но без использования этого или float, как вы просили, вы могли бы сделать что-то вроде этого:

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

Ответ №3:

Если вы хотите, чтобы он был закреплен в нижней (или другой) области экрана, почему бы не использовать фиксированное позиционирование, например:

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

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

}