我正在尝试使用 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>
最佳答案
语义方法
这是一种标记方程式的语义方法,通过添加一个类,可以从相同的标记中水平或垂直呈现该方程式。这些等式由数字、一个运算符和一个等号组成。这是方程式的标记:
<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
关于html - 使用 CSS 垂直格式化数学方程式 (5,343 + 32),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13694899/