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

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

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

0
Jeny 29 Май 2019 в 01:27

2 ответа

Лучший ответ

Это происходит потому, что ваш диапазон не 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
GlennFriesen 28 Май 2019 в 22:40

Примерно так, где 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>
1
Anthony Z 28 Май 2019 в 22:39