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

Question

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

它与图像不同，你只需要使用float: left;作为图像的p和float: right;，在本例中为h1。

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

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。