Question

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

以下是示例网站：

有问题的区块是标题下的“欢迎！我是......”

我想要'欢迎！'让它的底部与句子的其余部分对齐，并将下一行包裹在“欢迎！”下。就像现在一样，“欢迎！”右侧有两条线。

当然，如果所有文本都在一行中，我可以很容易地做到这一点，并且我可以使用跨度来设置大小。但是，因为这都是由drupal生成的，所以内容就是这样。换句话说，块中的文本来自数据库，并在div中生成，但“欢迎！”必须在模板中。如果我把它放在内容div中，我的用户每次编辑内容时都会搞砸它。

任何提示都表示赞赏。

Answer 1

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

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

然后不需要漂浮物。

Answer 2

<h1>在语义上对此用法不正确。 <h1>是一个语义标记，用于指示文章的标题或内容的主要部分。在这种情况下，您尝试使用<h1>标记来更改文本的显示而不是其目的。为此，使用span标记并指定类样式可以提供更好的服务：

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

不同的想法：

在段落标记的第一行添加行高，使其等于欢迎行的预期高度：

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

这可能会导致某些浏览器出现奇怪的空间（我还没有尝试过）。

另一个想法：

您可以将带有top-padding的样式添加到您用于主要内容区域的块元素中。这样可以防止文本在准备启动之前启动。请记住，这种方法将此填充添加到块元素的整体大小，因此高度为100px且顶部填充为20px的块元素实际上将为120px。