>我有一个div，它有两个跨度，分别左右对齐。切换到移动视图时，右对齐的文本应移动到下一行。
<div align="left">
<span style="float: left;">Receipt No:</span>
<span style="float: right";>#1111</spa>
</div>
切换到移动视图时，#1111 应位于收据编号：文本下。
发生这种情况是因为您的跨度不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>
像这样的东西，其中 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>