html - 文字定位

Question

我无法按我希望的方式放置文本。以下是我的代码。

HTML

<h1 class="h1">
        <div class="left"><span class="font">H</span>ello</div>
        <div class="left"><span class="font">T</span>here</div>
        <div class="left"><span class="font">J</span>ames</div>
</h1>

和我的CSS

.h1 {
    margin-left:5px;
    margin-top:3px;
    font-size:20px;
}
.font {
    font-size:35px;
}
.left {
    float:left;
    margin:0 10px 0 0;
}

这一切都很好，但是当我尝试向 div 添加另一个类时，下一个词出现在一行中。这是我试图开始工作的代码，jsFiddle .我正在尝试让文字成为垫脚石，如果您对我如何以更简单的方式做到这一点有建议，那就太好了。

Answer 1

在 left 类之后立即删除 ,。 , 使类名 left 无效，因为它显示为 left,。

<h1 class="h1">
        <div class="left"><span class="font">H</span>ello</div>
        <div class="left down"><span class="font">T</span>here</div>
        <div class="left downer"><span class="font">J</span>ames</div>
</h1>

Demo