CSS：如何在标题（h1）周围包装文本？

Question

我的设计的页面标题位于右侧h1，左侧p中的文字位于同一div。文本应该包围标题（当它与标题'碰撞'时断开，但在它下面，它应该使用div中的所有空格。

它与图片不同，您只需使用float: left;表示p和float: right;图片，在本例中为{{1} }。

我可以将h1放在h1内，但我想我会先问你们，而不是制作不整洁的代码。

Answer 1

请勿float:left使用<p>，float:right只使用<h1>

Here有一个简单的例子。

Answer 2

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;
}

Answer 3

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