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

我正在尝试使用3个数字与其他文本进行状态显示，如下所示：

--一种“翻转”

我可以用表来实现这一点，但CSS方法目前还没有实现

理想情况下，我希望HTML的结构如下（或更简单）：

但这种绝对定位在大小不一的数字上并不奏效。例如：

这是。

---

更新：

• 哎呀。上面的HTML无法验证<代码>元素不允许有块元素子元素。
  生产代码将

  p

  节点替换为

  li

  s。
  但这并不影响下面的答案。他们不顾一切地工作

---

使用

亲属

位置和

浮动

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>

从

.updwncontainer

中删除位置

绝对

&使用

浮动：左
属性在
上共享
和
.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;
}

您可以随意添加所需的边距

顺便说一句，如果不需要，请避免在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>

jsFiddle示例有什么问题？@GottliebNotschnabel，将其中一个得失数字放大；你会明白的。我不确定你的意思，但看看这个添加了“clearfix”类的更新，看看。这是个小问题，可能不值得大惊小怪。看看编辑，这样可以吗？我已经改变了html结构。就我所见，它有相同的（琐碎的）包装问题。到目前为止，我更喜欢你的第一个答案。你想让所有数字保持在同一条线上吗？使用display:inline block看起来是一个不错的解决方案，但对齐方式不正确。看这张照片picture@watt把你的代码和提琴一起发布是个好主意，这样总是有对它的引用：）@BrockAdams我想这就是你想要的。您可以编辑字体大小或损益填充以微调解决方案。为什么
.className
优于
div.className
？@GottliebNotschnabel，因为这是一个过度限定的选择器。您可以在此处阅读更多：。
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;
}

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;
}

<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>

.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;
}