使用CSS

Question

我想实现这种设计：

请注意，两个文本都完全在顶部对齐，但是我几乎可以肯定，这不可能在CSS中以可伸缩的方式实现（例如，我的意思是不使用位置相对/顶部对像素进行硬编码）。

使用flex似乎是实现此目的的一种好方法，但是由于这是文本，因此顶部对齐是正确的，但基于文本“边界框”，但字母“ 77”不会占据该框的100％高度，导致其未完全对齐。

我理解为什么会发生这种情况，因为字母“ a”不会占用与字母“ X”相同的空间，但是我只是想知道是否有人能够找到一个很好的技巧来实现这种设计。

这是我的两次尝试：

div#a {
  
  background:#EEE;
  line-height: 1;
}


span {
  vertical-align: text-top;
}

#b {
  display: flex;
  align-items: flex-start;
}

 

 <div id="a">
        <span style=" font-size: 48px;">77</span>
        <span style="font-size:14px;;">USD</span>
    </div>

<div id="b">
  <div style=" font-size: 48px; line-height: 48px;">77</div>
  <div style=" font-size: 14px;">USD</div>
</div>

（请注意有一个related问题，但他们不希望这样的“完美”对齐）

Answer 1

我认为您可以使用这种方法并调整line-height属性。

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  margin-bottom: 10px;
}

div .container span {
  line-height: 60%;
}

<div id="a">
  <div class="container">
    <span style=" font-size: 48px;">77</span>
  </div>
  <div class="container">
    <span style="font-size:14px;">USD</span>
  </div>
</div>

<div id="b">
  <div class="container">
    <span style=" font-size: 48px;">100</span>
  </div>
  <div class="container">
    <span style="font-size:14px;">USD</span>
  </div>
</div>