7

CSS を使用して数式を垂直方向にフォーマットしようとしています。たとえば、5,343 + 32 は次のようにフォーマットする必要があります。

1 行目: 5,343 (右揃え)

2 行目: + (左揃え) 32 (右揃え) --- プラス記号と下の数字が同じ行にあることに注意してください。

3 行目: ------ (横線)

私はこの1時間これをいじっていましたが、運がほとんどありませんでした。

私はこのように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 で、スタック レイアウトにすばやく変換できます。要素に 1 つ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

Do you mean something like this?: http://jsfiddle.net/PkfAU/2/

enter image description here

What you would be doing is using divs, because they are better for creating layouts. Paragraphs are also valid, as the other answer points out, but I find it easier to see with divs. In this case you will need a container div, and three horizontal ones, the second of them being also a container.

.plus and .number are floating inside its container .second, because you need them to use the same horizontal space (all floating elements require a wrapper).

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>
<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 に答える
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 に答える