如何在Web应用程序中显示所有分数?

时间:2014-03-03 08:38:31

标签: html mathjax fractions

我想设计一个简单的数学应用来训练分数。 我想知道如何在所有最新的浏览器(Chrome,Safari,Firefox,IE)中显示所有分数。

维基百科将它们嵌入为png,例如:

enter image description here

但对于一个动态的网络应用来说,这似乎是非常有用的,我想要生成学生应该使用的随机分数。

也许Mathjax有帮助?

例如,我想显示8/5 x 7/4 = ?

1 个答案:

答案 0 :(得分:4)

css有一种非常简单的方法。如果你只想显示分数,这个效果很好。对于更复杂的算术公式,这个解决方案可能很复杂。

预览

Fraction Example Preview http://imageshack.com/a/img824/218/c6y7.png

CodePen demo

<强> HTML

<div class="fraction">
  <span class="top">8</span>
  <span class="bottom">5</span>
</div>

<div class="fraction">
  <span class="operator">*</span>
</div>

<div class="fraction">
  <span class="top">7</span>
  <span class="bottom">4</span>
</div>

<div class="fraction">
  <span class="operator">= &nbsp; ?</span>
</div>

<强> CSS

.fraction, .top, .bottom {
    padding: 0 5px;    
}

.fraction {
    display: inline-block;
    text-align: center;    
}

.bottom{
    border-top: 1px solid #000;
    display: block;
}

.operator {
  overflow: auto;
  display: block;
  margin-bottom: 5px;
}