-3

同じに、ページのタイトルがh1右側に、テキストがp左側にあるデザインがありますdiv。テキストはタイトルを折り返す必要があります（したがって、タイトルと「衝突」するときに中断しますが、その下では、内のすべてのスペースを使用する必要がありますdiv）。

これは、画像の場合と同じようには機能しません。この場合は、とを画像に使用float: left;するだけです。pfloat: right;h1

h1中に入れることもできpますが、乱雑なコードを作成するのではなく、まず皆さんにお願いしたいと思いました。

4

3 に答える 3

4

に使用しないfloat:leftで<p>くださいfloat:right。<h1>

ここに簡単な例があります。

于 2012-07-03T15:18:44.540 に答える
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;
}

フローティング複数要素のプレビュー

于 2012-11-07T17:05:25.760 に答える
0

さらに 2 つの div を含む外側の div を作成できます。1 つは左側に、もう 1 つは右側にフローティングします。段落を左側に、H1 を右側に配置します。右側の div の幅を指定すると、右側の div に遭遇するまで、左側の div が自動的にすべてのスペースを占めます。

于 2012-07-03T14:56:29.347 に答える