html - 如何使用 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

试试这个方法

在你的div上定义class，一些根据你的设计写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>