切换到移动视图时如何使右对齐文本移动到新行

Question

我有一个 div，它有两个分别左对齐和右对齐的跨度。切换到移动视图时，右对齐的文本应移至下一行。

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

当切换到移动视图时，#1111 应位于收据编号：文本下方。

Answer 1

类似这样，其中 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>

Answer 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>

切换到移动视图时如何使右对齐文本移动到新行

How do I make a right aligned text move to new line when switched to mobile view

html

css

media