html - CSS：如何在标题（h1）周围换行？

Question

我有一个设计，页面的标题在h1右边，文本在p左边，在同一个div. 文本应该环绕标题（所以当它与标题“碰撞”时会中断，但在它下面，它应该使用 中的所有空间div）。

它与图像的工作方式不同，在这种情况下，您只需float: left;将p和float: right;用于图像，在这种情况下，h1.

我可以h1将p.

Answer 1

只是不要float:left用于<p>，而仅float:right用于<h1>

这里有一个简单的例子。

Answer 2

艾丽莎是对的，

您可以通过在标题中创建多个元素并将它们全部浮动来更进一步......

像这样：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;
}

Answer 3

您可以创建一个包含另外两个 div 的外部 div，一个向左浮动，另一个向右浮动。左边是段落，右边是H1。如果为右边的div指定宽度，左边的div会自动占据所有空间，直到遇到右边的div。