Как это сделать в 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> появляется текст, чтобы рассматривать его как Indice и <sub></sub> как примечание. Чтобы заставить выравнивание, вам придется играть с vertical-align значением в px или в%. `

<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; 
}