Как заставить текст, выровненный по правому краю, переместиться на новую строку при переключении в режим мобильного просмотра - PullRequest
Новая
       20

Как заставить текст, выровненный по правому краю, переместиться на новую строку при переключении в режим мобильного просмотра

0 голосов
/ 29 мая 2019

У меня есть div, который имеет два пролета, которые выровнены по левому и правому краям соответственно.При переключении в режим просмотра с мобильных устройств текст, выровненный по правому краю, должен перейти на следующую строку. 

<div align="left">
    <span style="float: left;">Receipt No:</span>
    <span style="float: right";>#1111</spa>
</div>

при переключении на режим просмотра с мобильных устройств # 1111 должен находиться под квитанцией №: текст.

Ответы [ 2 ]

1 голос
/ 29 мая 2019

Это происходит потому, что ваш диапазон не равен display: block.

Я предполагаю, что когда эта строка переходит на следующую строку, вы хотите, чтобы она была выровнена по левому краю, а не снизу и по-прежнему выровнена по правому краю.

Я предлагаю использовать медиа-запросы. Я не предлагаю пытаться использовать медиа-запросы встроенными, поэтому вы захотите перенести свой CSS в ваш <head>

<html>
<head>
<meta name='viewport' content="width=device-width, initial-scale=1" />
<style>
.alignleft {align: left;}
.floatleft {float: left;}
.floatright {float: right;}
@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
    .mobilebreak {display: block; float: left;}
}
</style>
</head>
<body>
<div class="alignleft">
<span class="floatleft">Receipt No:</span>
<span class="floatright mobilebreak">#1111</span>
</div>
</body>
</html>
1 голос
/ 29 мая 2019

Примерно так, где 480px - это мобильный вид.Вы можете настроить это по своему вкусу. 

.number {
  display: inline-block;
  float: right;
}



@media only screen and (max-width: 480px) {
  .number {
    display: block;
    float: none;
  }
}
<div align="left">
    <span>Receipt No:</span>
    <span class="number">#1111</spa>
</div>
...