如何实现单个span居左上，另外两个span并排显示在其下方

你可以直接在现有HTML结构基础上添加CSS实现需求，不需要修改原有标签：

方案1：极简实现（无HTML改动） #

给顶部的span设置块级显示，使其独占一行即可，CSS代码如下：

#top-left {
  display: block;
  margin-bottom: 4px; /* 可自行调整上下行的间距 */
}

实现原理：display: block属性会让元素默认独占整行，下方两个原本为inline-block的span会自动换到下一行并排显示，完全匹配你要的效果。

方案2：Flex布局（扩展性更强） #

如果后续需要调整对齐规则、间距更方便，可以给三个span套父容器用flex布局：

调整后的HTML #

<div class="price-container">
  <span id="top-left" class="is-text-align-right">$1.15</span>
  <div class="price-bottom">
    <span id="bottom-left" class="is-display-inline-block is-text-align-right">$2.00</span>
    <span id="bottom-right" class="is-display-inline-block is-text-align-right">$3.00</span>
  </div>
</div>

对应CSS #

.price-container {
  display: flex;
  flex-direction: column;
  row-gap: 4px; /* 上下行间距 */
}
.price-bottom {
  display: flex;
  column-gap: 8px; /* 下方两个价格的横向间距 */
}

内容的提问来源于stack exchange，提问作者user12970426