我如何使用HTML / CSS / jQuery编写一个复杂的部分？ [英] How can I write a complex fraction using HTML/CSS/jQuery?

问题描述

我希望能够使用HTML / CSS / jQuery（而不是使用TeX渲染器甚至MathML）编写一个小部分。目前有一个很好的解决方法，写简单的分数，如果你只有一个分子和分母，但一旦你开始使用多个术语，它看起来相当可怕。例如，使用：

I'd like to be able to write a fraction using HTML/CSS/jQuery (rather than using a TeX renderer or even MathML). At the moment there's a great workaround for writing simple fractions that works if you just have one term for both the numerator and the denominator, but once you start using more than one term it looks rather horrible. As an example, using:

< sup>< font size = -2> x< sup> 2< / sup> + 3x + 5< / font>< / sup> /< sub>< font size = -2> 2x< / font>< / sub>

产生...

^{x 2 + 3x + 5} / _2x

^{x2 + 3x + 5}/_2x

我想要的是一个漂亮的水平线来定义分数而不是反斜杠。我尝试使用 div 标签与 border-bottom 这样，但输出仍然相当糟糕： p>

What I'd like is a beautiful horizontal line to define the fraction rather than a backslash. I've tried using div tags with border-bottom as such, but the output is still quite awful:

  <div style="float:left;">Substitute 4 for 'x' in the equation: &nbsp;</div>
  <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">x<sup>2</sup> + 3x + 5</div>
    <div style="font-size:small;text-align:center;">2x</div>
  </div>

产生...

我要找的是HTML / CSS / jQuery分数...

What I'm looking for is a HTML/CSS/jQuery fraction that...

• 有一个容易识别的水平线，跨越最长分子的宽度<​​strong> 分母;


• 与当前文本内嵌在一起（它可以稍微超过文本的行高，但我不希望它突破其接缝）;

• has an easily discernable horizontal line spanning the width of the longest numerator or denominator;
• appears inline with the current text (it can slightly exceed the line height of the text, but I don't want it bursting out of it's seams); and
• (not really necessary, but a nice cherry on top) italicised letters (not numbers or brackets).

这样做可以吗？怎么样？谢谢！

Can this be done? How? Thanks!

推荐答案

好的，我找到了一个更好的方法来做你在做什么。没有额外的CSS，只是一些表格的魔法。

Alright, I found a better way to do what you were doing. No extra CSS, just some tabular magic.

<table><tr><td>
<div style="float:left;">Substitute 4 for 'x' in the equation: &nbsp;</div></td>
 <td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">x<sup>2</sup> + 3x + 5</div>
    <div style="font-size:small;text-align:center;">2x</div>
  </div></td>
</tr>
</table>

表auto-center-align：D

Tables auto-center-align :D

如需更多文字，请添加更多< td> 。保留文字 - < td> s和math - < td> 为新行添加另一个< tr> 。

For more text, add more <td>s. Keep text-<td>s and math-<td>s separate. Add another <tr> for a new line.

<table><tr><td>
<div style="float:left;">Substitute 4 for 'x' in the equation: &nbsp;</div></td>
 <td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">x<sup>2</sup> + 3x + 5</div>
    <div style="font-size:small;text-align:center;">2x</div>
  </div></td>
<td>. If you feel bored, solve this as well:</td>
<td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">y<sup>2</sup> + 3x+5y<sup>5</sup> + 5</div>
    <div style="font-size:small;text-align:center;">1000</div>
  </div></td>
</tr>
<tr>
<td>
<div style="float:left;">Substitute 4 for 'x' in the equation: &nbsp;</div></td>
 <td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">x<sup>2</sup> + 3x + 5</div>
    <div style="font-size:small;text-align:center;">2x</div>
  </div></td>
<td>. If you feel bored, solve this as well:</td>
<td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">y<sup>2</sup> + 3x+5y<sup>5</sup> + 5</div>
    <div style="font-size:small;text-align:center;">1000</div>
  </div></td>
</tr>
</table>

这篇关于我如何使用HTML / CSS / jQuery编写一个复杂的部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！