html - 使用 CSS 垂直格式化数学方程式 (5,343 + 32)

Question

我正在尝试使用 CSS 垂直格式化数学方程式。例如 5,343 + 32 应该这样格式化:

第 1 行:5,343(右对齐)

第 2 行:+(左对齐)32(右对齐)--- 注意加号和底部数字在同一行。

第 3 行:------(水平线)

在过去的一个小时里，我一直在胡闹，但运气很差。

我用 HTML 布局是这样的:

<div id="textbox">
<p class="upperNum">5,343</p>
<p class="sign">+</p>
<p class="lowerNum">32</p>
<p class="line"><hr></p>
</div>

Answer 1

语义方法

这是一种标记方程式的语义方法，通过添加一个类，可以从相同的标记中水平或垂直呈现该方程式。这些等式由数字、一个运算符和一个等号组成。这是方程式的标记:

<span class="equation">
  <span class="number">5,343</span>
  <span class="operator">+</span>
  <span class="number">32</span>
  <span class="equals">=</span>
  <span class="number">5,375</span>
</span>

单独水平渲染:

5,343人 + 32 = 5,375

通过一些 CSS，我们可以快速转换为堆叠式布局。我们只需向 equation 元素添加一个 stacked 类:

<span class="equation stacked">
  <span class="number">5,343</span>
  <span class="operator">+</span>
  <span class="number">32</span>
  <span class="equals">=</span>
  <span class="number">5,375</span>
</span>

以下 CSS 发挥了神奇作用:

.equation.stacked {
  display: inline-block;
}

.equation.stacked .number {
  display: block;
  margin-left: 1em; /* space for the operator */
  text-align: right;
}

.equation.stacked .operator {
  float: left;
}

.equation.stacked .equals {
  display: block;
  height: 0;
  border-bottom: solid 1px black;
  overflow: hidden;
}

呈现如下:

这是一个您可以探索的 JSBin:http://jsbin.com/afemaf/1/edit