CSS：如何在標題（h1）上包裝文本？

Question

我有一個h1的頁面標題的設計在右邊，p在左邊的文本在相同的div。文本應該圍繞標題（所以在與標題「碰撞」時斷開，但在其下面，它應該使用div中的所有空格）。

它不工作一樣與圖片，您剛剛使用float:left;爲p和float:right;的圖像，在這種情況下h1。

我可以把h1放在p裏面，但我想我會先問你們，而不是做不整潔的代碼。

Answer 1

你可以創建一個包含兩個div的外部div，一個浮動左邊，另一個浮動右邊。有左邊的段落和右邊的H1。如果您在右側指定div的寬度，則左側的div將自動佔據所有空間，直到遇到右側的div。

Answer 2

只要不使用float:left爲<p>，但只float:right爲<h1>

Here有一個簡單的例子。

Answer 3

Elisa的是對的，

你可以把它進一步通過創建您的標題中的多個元素和浮動他們都...

像這樣：http://jsfiddle.net/jaap/CFnsv/74/

HTML：

<div class="container"> 
    <h1> 
     <span>&ldquo;I love</span> 
     <span>deadlines.</span> 
     <span>I love the</span> 
     <span>whooshing</span> 
     <span>noise they</span> 
     <span>make ad</span> 
     <span>they go</span> 
     <span>by.&rdquo;</span> 
    </h1> 
    <p> 
     Lorem ibh tortor, vulpu... 
    </p> 
    <p> 
     Lorem ipsum dolor s... 
    </p> 
</div> 

CSS：

.container p{ 
    margin-bottom: 20px; 
} 
h1{ 
    font-size:44px; 
    font-family: 'Open Sans', sans-serif; 
    line-height:36px; 
    text-transform: uppercase; 
    color: #DAAB2B; 
} 
h1 span{ 
    float:right; 
    text-align: right; 
    clear:both; 
    margin-left: 40px; 
}