Как заставить два разных размера шрифта сидеть на одной строке, используя Unsemantic

Я новичок как в front-end-dev, так и в несемантическом. Я пытаюсь получить два разных размера шрифта, чтобы сидеть на одной строке. Но обычные методы, похоже, не работают. Я попытался выровнять по вертикали: "низ"; но это не сократило это. Вот как это выглядит в настоящее время, извините, я не смог использовать jsfiddle, чтобы показать вам, использование unsemantics означает, что это не показывалось должным образом

 10 <body class="grid-container">
 11 <header>
 12
 13   <div class ="grid-100 align-center">
 14   <div class="grid-30">
 15     <div id="name"><a href="http//nadiavu.com">Nadia</a></div> 
 16   </div>
 17   <div class="grid-30">
 18     <div id="about"><a href="about">About</a></div>
 19   </div>
 20   <div class="grid-20 suffix-20">
 21    <div id="contactpage"><a href="contacpage">Contact</a></div>
 22 </div>
 23 </div>

И это CSS

 27 #name{
 28      color: #A0909D;
 29      font-size: 2.2em ;
 30      font-family: Palatino;
 31      float: right;
 32  }
 33
 56 #about{
 57     font-family: Palatino;
 58     font-size: 1.2em;
 59     float: right;
 60
 61
 62 }
 63
 64 #contactpage{
 65       font-family: Palatino;
 66       font-size: 1.2em;
 67       float: right;
 68
 69  }
Источник

3 ответа

Решение

Вертикальное выравнивание не создано для этого. Вместо этого используйте свойство line-height:

<!DOCTYPE html>
<html>
<head>
<style>
body {font-size: 16px;}
p {float: left; margin: 5px; }
p.big {font-size: 200%; line-height:35%;}
</style>
</head>

<body>
<p>
This
</p>

<p class="big">
This
</p>

<p>
This
</p>

</body>
</html>
Источник

Вы можете просто позволить тексту вести себя как обычные встроенные стили, как, например, Demo.

Вот CSS:

.big {
    font-size: 20px;
}

.small {
    font-size: 10px;
}

Проблема вызвана их перемещением.

Или вы можете сделать что-то вроде этого,

CSS:

.parent {
    vertical-align: bottom;
}

.parent span {
    display: inline-block;
    width: 200px;
    height: 50px;
}

.big {
    font-size: 20px;
}

.small {
    font-size: 10px;
}

Наконец, скрипка: Демо

ИЛИ ЖЕ!! Вы можете пойти по этому поводу,

CSS:

.parent {
    display: table;
    vertical-align: bottom;
    width: 100%;
}

.parent span {
    display: table-cell;
    width: 33%;
    height: 50px;
}

.big {
    font-size: 20px;
}

.small {
    font-size: 10px;
}

Еще одна скрипка, Демо

Источник 
<P style="color: white;font-size: 2.2em" class="w3-center"><span style="font-
size: 1.2em">Nadia</span>About<span style="font-size: 1.2em">Contact</span>
</P>

это то, как вы можете получить разный размер текста в одной строке

Источник
Другие вопросы по тегам