如何在HTML和CSS中完成此圖像？

Question

我有這個圖像是要在HTML和CSS中實現的。

這是我都試過了。

<span>$</span><span style="font-size: 50px;">99</span><span style="vertical-align: text-top;">00</span>

但這其實不轉出像我想的形象。

Answer 1

例如：

.price { 
 
    font-size: 80px; 
 
    color: #f60; 
 
} 
 
.price sup { 
 
    font-size: 38px; 
 
} 
 
.price sub { 
 
    font-size: 28px; 
 
    color: #aaa; 
 
    position: absolute; 
 
    display: inline-block; 
 
    margin: 48px 0 0 -40px; 
 
}

<span class="price"><sup>$</sup>99<sup>00</sup><sub>/month</sub></span>

http://jsfiddle.net/1zjuddj8

Answer 2

聽起來像<sup>標籤是你的朋友在這裏。 <sup>標籤中的任何文字都將成爲上標。

例

<sup>$</sup>99<sup>00</sup>

從w3.org其他文檔/參考：http://www.w3.org/TR/html-markup/sup.html

Answer 3

您有使頂部使用<sup></sup>出現在你的文字把它當作一個指標與<sub></sub>作注特定的標籤。要強制對齊，您必須使用px或％以vertical-align值進行遊戲。 `

<sup style="vertical-align: 10;">$</sup><sub style="font-size: 50px;vertical-align:-10">99</sub><sup style="vertical-align: 10;">00</sup> 

Answer 4

您可以使用sup使文本標，然後使用position: relative和top設置文本的位置：

HTML：

<h1><sup>$</sup>99<sup>00</sup></h1> 

CSS：

h1 { font-size: 50px; } 
sup { font-size: 15px; 
    position: relative; 
    line-height: 0; 
    vertical-align: baseline; 
    top: -23px; 
} 

JS Fiddle

Answer 5

另一種解決方案：

body { 
 
    font-size: 20px; 
 
} 
 
.div-table { 
 
    display: table; 
 
    border-collapse: collapse; 
 
} 
 
.div-table .div-table-row { 
 
    display: table-row; 
 
} 
 
.div-table .div-table-cell { 
 
    display: table-cell; 
 
    text-align: left; 
 
    vertical-align: top; 
 
} 
 
.big-number { 
 
    font-size: 50px; 
 
} 
 
.padding-top { 
 
    padding-top: 5px; 
 
}

<div class="div-table"> 
 
    <div class="div-table-row"> 
 
    <div class="div-table-cell padding-top"> 
 
     $ 
 
    </div> 
 
    <div class="div-table-cell"> 
 
     <span class="big-number">99</span> 
 
    </div> 
 
    <div class="div-table-cell padding-top"> 
 
     <div>00</div> 
 
     <div>/month</div> 
 
    </div> 
 
    </div> 
 
</div>

http://jsfiddle.net/gbx0ogqm/

Answer 6

這需要多一點微調，但具有大量的控制，進行前端佈局非常有用的溶液：

HTML代碼

<div class="price_tag"> 
    <div class="price"><sup>$</sup><span class="bignum">99</span><sup>00</sup> 
</div> 
    <div class="month">/month</div> 
</div> 

CSS代碼

.price_tag { 
    position:relative; 
    width:190px; 
    height:100px; 
    color:#f90; 
    font-size:6em; 
    font-family:helvetica, arial, sans-serif; 
} 
.price { 
    position:relative; 
    width:200px; 
    height:100px; 
    font-weight:bold; 
} 
sup { 
    position:relative; 
    font-size:2.5rem; 
    top:1rem 
} 
.month { 
    width:60px; 
    height:30px; 
    color:#ccc; 
    font-size:1rem; 
    right:0; 
    bottom:0; 
    z-index:3; 
    position:absolute; 
} 

fiddle here

Answer 7

要準確複製它，你的代碼將不得不比這更復雜。我試圖儘可能接近我在這裏可以與之匹敵：http://jsfiddle.net/wvcm92ka/

的代碼如下：

HTML：

<div class="amount"> 
    <div class="amount-parts"> 
     <div class="amount-currency">$</div> 
     <div class="amount-whole">99</div> 
     <div style="clear: left;"></div> 
    </div> 
    <div class="amount-parts"> 
     <div class="amount-decimal">00</div> 
     <div class="amount-period">/month</div> 
     <div style="clear: left;"></div> 
    </div> 
    <div style="clear: left;"></div> 
</div> 

CSS：

.amount-parts{ 
    font-family: verdana, sans-serif; 
    float: left; 
} 
.amount-currency, .amount-whole, .amount-decimal, .amount-period{ 
    font-weight: 600; 
} 
.amount-currency, .amount-whole, .amount-decimal{ 
    color: #ff0000; 
} 
.amount-currency{ 
    float: left; 
    font-size: 32pt; 
    font-weight: bold; 
    margin-top: 5px; 
} 
.amount-whole{ 
    font-size: 60pt; 
    float: left; 
} 
.amount-decimal{ 
    color: #ff0000; 
    font-size: 24pt; 
    font-weight: bold; 
    margin-top: 15px; 
} 
.amount-period{ 
    color: #999; 
    font-size: 10pt; 
    font-weight: bold; 
}