Question

我对前端开发和非语义都很陌生。我试图让两种不同的字体大小坐在同一条线上。但传统方法似乎不起作用。我尝试了vertical-align：“bottom;”但这并没有削减它。 This is what it currently looks like 对不起，我不能用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  }

Answer 1

您可以让文字像普通内联样式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;
}

最后，小提琴：Demo

OR !!你可以选择这个选项，

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

又一个小提琴，Demo

Answer 2

不为此创建vertical-align。请改为使用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>

Answer 3

    let fileContent = require('php!./index.php');

这就是如何在同一行上获取不同大小的文本

如何使用Unsemantic将两种不同的字体大小放在一行上

3 个答案: