如何使用同步，内联，上标和下标来定位此文本？

Question

我试图制作状态显示，其中3个数字与其他文字内联，如下所示：

- 一种翻转的＆＃34; Isotope notation＆＃34;。

我可以用表格做到这一点，但CSS方法暂时让我不知所措。

理想情况下，我想构建像这样（或更简单）的HTML：

<p>
    <div class="sharesblock">
        <div class="shares">2535</div>
        <div class="updwncontainer">
            <div class="gains">2666</div>
            <div class="losses">-13</div>
        </div>
    </div>
    of
    <span class="companyname">Super MegaCorp</span>
</p>

但我无法使其发挥作用。这几乎是这样的：

div.sharesblock {
    display: inline-block;
    margin-right: 3ex;
    position: relative;
}
div.updwncontainer {
    position: absolute;
    right: -2.8ex;
    top: -0.3ex;
}
div.losses {
    font-size: 1.1ex;
    color: red;
}
div.gains {
    font-size: 1.1ex;
    color: green;
}

但绝对定位并不适用于大小不等的数字。 EG：

此处the jsFiddle。

---

更新

• 糟糕。上面的HTML没有验证。 <p>个元素不允许使用块元素子元素 生产代码用p替换li个节点 但是，测试并不会影响下面的答案。无论如何，他们都是一样的。
• 的 Here is the kind of testing I used to pick an answer.

Answer 1

使用relatives位置和float

<强> FIDDLE

<强> HTML

<p>
    <div class="sharesblock">
        <div class="shares">25355</div>
        <div class="updwncontainer">
            <div class="gains">2666666</div>
            <div class="losses">-139999</div>
        </div>
    </div>
    of
    <span class="companyname">Super MegaCorp</span>
</p>

<强> CSS

div.sharesblock {
    margin-right: 3ex;    
    position: relative;
    clear:both;
}
div.sharesblock .shares{
    float:left;
    margin-right:.5ex;    
}
div.updwncontainer {
    position: relative;
    float:left;
    margin-right:.5ex;
}
div.losses {
    font-size: 1.1ex;
    color: red;
}
div.gains {
    font-size: 1.1ex;
    color: green;
}
span.companyname {
    font-style: italic;
}

Answer 2

Demo Fiddle

从absolute＆amp;移除位置.updwncontainer在float:left上使用.shares属性＆amp; .updwncontainer。

<强> CSS

div.sharesblock {
    margin-right: 3ex;
    position: relative;
}
.shares {
    float:left;
    margin-right: 5px;
}
div.updwncontainer {
    position: relative;
    float: left;
    margin-right: 5px;
}
div.losses {
    font-size: 1.1ex;
    color: red;
}
div.gains {
    font-size: 1.1ex;
    color: green;
}
span.companyname {
    font-style: italic;
}

Answer 3

Is this what you are looking to achieve? (jsFiddle)您可以随意添加所需的边距。

顺便提一句，according to these guys，在不需要时避免使用CSS中的div.className。只需使用.className代替。

调整后的HTML：

<p>
    <div class="sharesblock">
        <div class="shares">2535</div>
        <div class="updwncontainer">
            <span class="gains">2666</span>
            <br/>
            <span class="losses">-13</span>
        </div>
    </div>
    of
    <span class="companyname">Super MegaCorp</span>
</p>

CSS：

.sharesblock {
    display: inline-block;
    vertical-align:middle;
}
.shares {
    display:table-cell;
    vertical-align:middle;
    padding-right: 0.5ex; /* OP Added */
}
.updwncontainer {
    display: table-cell;
    vertical-align:middle;
    line-height: 1ex;    /* OP Corrected from px units */
    padding-bottom: 0.5ex;  /* OP Added to tweak alignment -- better than other solutions. */
}
.losses {
  font-size: 1.1ex;
  color: red;
}
.gains {
  font-size: 1.1ex;
  color: green;
}