如何使用html，css显示两种不同的字体大小，2种不同的文本

Question

第一个文本部分有两行。第二个文本行只有一行。在这里，我附上了图片：

如何使用css执行此操作？

<td class="right-col">
    <div>
        <div>
            <span>average<br>cost</span>
        </div>
        <div>
            <span>$2,500</span>
        </div>
    </div>
</td>

Answer 1

尝试这种方式

在class上定义div，根据您的设计写一些css。

.mainDiv{

    padding: 20px;
    background: #fcfcfc;}
.left-text {
    display: inline-block;
    vertical-align: top;
    text-align: right;
    color: gray;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 13px;
}
.right-text {
    display: inline-block;
    vertical-align: top;
    text-align: right;
    color: gray;
    text-transform: uppercase;
    font-size: 23px;
    margin-left: 5px;
}

<div class="mainDiv">
         <div class="left-text">
               <span>average<br>cost</span>
         </div>
         <div class="right-text">
              <span>$2,500</span>
         </div>
     </div>

Answer 2

你可以采取的众多方法之一。

<div class="container">
  <div class="column txt-right">
    <span>AVERAGE<br>COST</span>
  </div>
  <div class=" column txt-left">
    <span>$2,500</span>
  </div>
</div>

{{1}}

Answer 3

.right-col div {
  table-layout: fixed;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  background: linear-gradient(to bottom, #f7f8f8 0%,#fbfbfb 56%,#f5f6f6 74%,#e8e9e9 100%); 
  line-height: 10px;
  font-size: 10px;
  color: #85929c;
  display: table;
  width: 200px;
}

.right-col div span {
  vertical-align: top;
  display: table-cell;
  padding: 10px 3px;
}

.right-col .text {
  text-align: right;
}
.right-col .amount {
  line-height: 20px;
  font-size: 18px;
}

<table class="table">
  <tbody>
    <tr>
      <td class="right-col">
         <div>
             <span class="text">average<br>cost</span>
             <span class="amount">$2,500</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>