第一个文本部分有两行。第二个文本行只有一行。在这里,我附上了图片:
如何使用css执行此操作?
<td class="right-col">
<div>
<div>
<span>average<br>cost</span>
</div>
<div>
<span>$2,500</span>
</div>
</div>
</td>
答案 0 :(得分:0)
尝试这种方式
在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>
答案 1 :(得分:0)
你可以采取的众多方法之一。
<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}}
答案 2 :(得分:0)
.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>