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

Question

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

正如你所看到的，当发生这种情况时，比较会变得很糟糕。据我所知，这是因为W是span内封装的div：

<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生成的样式属性，因为比较是在onClick上生成的。我用来设置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。

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