底部对齐浮动H1的文本？

Question

我有一块文字，并在块内部有一个h1标签向左浮动。我希望第一行文本与第一行文本的底部对齐。

下面是示例网站：

http://myhealthsense.abyteshosting.com/

有问题的块是说，标题下的块“欢迎我是......”

我想要的“欢迎！使其与句子的其余部分对齐，并在下一行包含在“欢迎！”下。就像现在一样，“欢迎！”右侧有两行。

当然，如果所有的文字都排在一起，我就可以轻松地做到这一点，并且我可以使用跨度来设置尺寸。但是，因为这些都是由drupal生成的，所以内容就像它一样。换句话说，块中的文本来自数据库，并在div中生成，但是'welcome'！必须在模板中。如果我把它放在内容div中，每次他们编辑内容时，我的用户都会搞砸了。

任何提示表示赞赏。

Answer 1

对于此用法，<h1>在语义上不正确。 <h1>是一个语义标记，用于指示文章的标题或内容的主要部分。在这种情况下，您试图使用<h1>标签来更改文本的显示，而不是其目的。

<p><span class="welcome">Welcome!</span> blah blah blahbitty blah</p> 

不同的想法：

添加的line-height您段落标记的第一行等于对于这一点，你将得到更好的使用span标签和分配类样式服您的欢迎线的预期高度：

p:first-line 
{ 
    line-height: 1.5em; 
} 

这可能会导致在某些浏览器，我认为一个奇怪的空间（我还没有尝试出来呢）。

另一个想法：

你可以与顶级填充到你使用你的主要内容区域，该块元件添加一个样式。这将防止文本在准备开始之前启动。请记住，此方法将此填充添加到块元素的整体大小，因此，高度为100px且顶部填充为20px的块元素实际上将为120px。

Answer 2

您可以将您的文字放在<p></p>中，并为h1和p指定display:inline;。 IE：

<h1>Welcome!</h1><p>Mytext here</p> 

然后浮动是不必要的。