7

我正在尝试使用 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>
4

5 回答 5

8

语义方法

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

<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，我们很快就可以转换成堆叠布局。我们只需向元素添加一个stacked类：equation

<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

于 2012-12-05T01:53:28.187 回答
3

你的意思是这样的吗？： http: //jsfiddle.net/PkfAU/2/

在此处输入图像描述

您要做的是使用 div，因为它们更适合创建布局。正如另一个答案指出的那样，段落也是有效的，但我发现使用 div 更容易看到。在这种情况下，您将需要一个容器 div 和三个水平的，其中第二个也是一个容器。

.plus并且.number浮动在其容器内.second，因为您需要它们使用相同的水平空间（所有浮动元素都需要包装器）。

HTML：

<div class="container">
    <div class="first">5,343 </div>
    <div class="second">
        <div class="plus">+</div>
        <div class="number">32</div>
    </div>
    <div class="third">
        <div class="result">5,375</div>
    </div>
</div>

CSS：

.container {
    width:200px;
}

.first,
.second {
    width:200px;
    text-align:right;
    display:table;
}
.plus {
    width:auto;
    float:left;
}
.number {
    width:auto;
    float:right;
}
.third {
    width:200px;
    text-align:right;
    border-top:1px solid black;
}​
于 2012-12-04T02:00:26.710 回答
0

我认为这可能是你最好的选择：

HTML：

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

CSS：

#textbox { width: 75px; }
.upperNum { text-align: right; }
.operand { float: right; }
.sign { float: left; }
.clear { clear: both; }

这是一个显示这种效果的小提琴：

http://jsfiddle.net/8CPar/

在这里，您可以在段落中包含底线，然后给运算符和操作数一个单独的可以浮动的跨度容器，从而为您提供所需的效果。然后，添加一个清除浮动的“清除中断”，使水平中断正确显示。

我希望这有帮助！

于 2012-12-04T02:02:33.120 回答
0

这里有一些很好的例子，但我努力制作小提琴，所以不妨发布它。

您只需要确保正确设置宽度和对齐方式并且它应该可以解决。

我的JSFiddle 示例。

<div id="list">
    <span class="item">5472</span>
    <span class="operator">+</span><span class="item operand">32</span>

    <hr class="divider"/>

    <span class="result">5504</span>
</div>

用 css

.list
{
    width:50px;
}

span
{
    display:block;
    margin-left:20px;
    font-family:"Lucida Console", Monaco, monospace;
    width:50px;
}

.operator
{
    float:left;
    width:20px;
    margin-left:0px;
}

.divider
{
    clear:both;
    width:40px;
    margin-left:20px;
}
.operand
{
    float:left;
    width:50px;
}

我还使用 , 创建了一个示例pre，它使用预格式化的文本，所以它应该仍然是准确的。

于 2012-12-04T02:09:22.877 回答
0

经典，

<html>
<head>
    <style type="text/css">
        .textbox
        {
            width: 100px;
        }
        .upperNum
        {
            text-align: right;
            width: 100%;
        }
        .sign
        {
            float: left;
            text-align: left;
        }
        .lowerNum
        {
            text-align: right;
        }
        .secondline
        {
            clear: both;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="textbox">
        <div class="upperNum">
            5,343
        </div>
        <div class="secondline">
            <div class="sign">
                +
            </div>
            <div class="lowerNum">
                32
            </div>
        </div>
        <div>
            <hr />
        </div>
    </div>
</body>
</html>
于 2012-12-04T02:18:15.867 回答