html - CSS 样式——在 div 内使用不同的字体大小

Question

我有一段代码可以比较多首诗中的同一行。它工作正常，除非该行的首字母在原稿中作为大写字母出现，如下所示:

如您所见，当发生这种情况时，比较就会变得不稳定。据我所知，这是因为 W 是一个封装在 div 中的 span:

<div class="comparison" id="EETS.QD.1" style="display: block;">
    <div class="compare_item" style="margin-left: 25px;">London, British Library Harley 2251: 
        <a style="text-decoration:none; color:#D5D5E5;" href="Quis_Dabit/British_Library_Harley_2251/British_Library_Harley_2251_f42v.html">
            <span class="capital_2_blue">W</span>
         ho shal gyve · vnto my hede a welle 
        </a>
   </div>
</div>

与通过javascript生成的样式属性，因为比较是在点击时生成的。我用来设置 div 和 span 样式的 CSS 如下:

div.comparison { 
    display: block;
    height: auto; 
    width: 755px;
    margin-right: 10px;
    padding-left: 10px;
    margin-left: auto; 
    background-color: #454595; 
    border-width: 1px; 
    font-size: 12pt; 
    color: #EFFFFF; 
    display: none;
} 

span.capital_2_blue{
    float: left;
    color: blue;
    font-size: 60pt;
    line-height: 12pt;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;
}

我的问题是:如何显示每一行，以便任何超大字母都按预期出现在实际文本行的开头？这就是我的目标:

我已经能够通过将 display:contents 添加到我的 span 的样式中来实现它，但这会使 W 扩展到页面上生成的div:

我将如何设置这些元素的样式以实现我希望的外观，首字母保持它们在文本中正确显示的高度但不像当前那样换行？我如何确保 span 与其周围的 div 完美配合？谢谢。

Answer 1

您应该删除 float:left 并将 display:inline-block 添加到 span.capital_2_blue。

那是因为 float 内容从正常流中移除，其他内容将环绕它。 https://developer.mozilla.org/en-US/docs/Web/CSS/float