底部對齊浮動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> 

然後浮動是不必要的。