2

<p>背景として引用画像を使用し、タグ内に多くのテキストを使用する段落があります。タグの前にすべてのテキストを画像の右側に配置して画像を表示しようとしています<p>が、画像がその中に表示されているように見えますが、これは望ましくありません。少し見やすくするためにフィドルを作成しました：JSFiddle

これが私のCSSです：

.container_12 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

.blockquote {
    font-size: 14px;
    font-family: 'Times', serif;
    font-style: italic;
    color: #222222;
    background-color: #f7f7f7;
    background-image: url(http://somesite/Icon_Quote.png);
    background-position: left top;
    background-repeat: no-repeat;
    min-height: 40px;
    padding: 10px;
    margin-bottom: 10px;
}

.QuoteTextToLeft {
    float: left;
    margin: 50px 10px 10px 10px;
}

そしてHTML：

<div class="container_12">
<div>
    <img class="QuoteTextToLeft" src="http://someothersite/man.png"
      alt="" width="200" height="250" /> 
    <a id="andrew_reeder"></a>
    <p class="blockquote">START HERE - this is a test, ... (snipped)
        <br />
        <br />this is a test, a test of the emergency broadcast system....
        <br />
        <br />this is a test, a test of the emergency broadcast system....
        <br />
        <br />this is a test, a test of the emergency broadcast system....
        <br />
        <br />Someone who cares
        <br />
        <br />Some title</p>
</div>

私がやりたいのは、<p class="blockquote">タグの外側に画像を表示して、引用画像が「ここから開始」と表示されている場所に配置されるようにすることです。

現在の外観は次のとおりです。 画像

そして、これが私が望むものです： 画像2

4

3 に答える 3

5

あなたの最善の策は、それを背景画像にしないことです.

.blockquote {
    font-size:14px;
    font-family:'Times', serif;
    font-style:italic;
    color:#222222;
    background-color:#f7f7f7;
    min-height:40px;
    padding:10px;
    margin-bottom:10px;
}
.blockquote:before {
    content:url('http://pokemonresource.wikinet.org/w/images/pokemonresource/uploads/a/a8/Icon_Quote.png');
    margin-right:10px;
    float:left;
}

これは CSS3 ソリューションです...疑似クラスを利用して、すべての要素の:before直前に何を追加するかを指定しています。.blockquote

プロパティを画像の URL に設定しcontentます (ファイルの種類に応じて、異なる結果が得られます。これは png ファイルであるため、定期的に画像が表示されます)。

最初の行だけでなく残りの引用を折り返すために、 を使用しますfloat:left。最後に、間隔を調整するために、右マージンを追加します。

これは、任意のサイズの画像で機能します。

オリジナルの修正版は次のとおりです:デモ

そして、これは画像を拡大したものです（引用は同じままです）：デモ

widthまた、画像のサイズ変更に非推奨の方法を使用していることにも注意してください。これには、 /height属性ではなく CSS を使用してください。

最後に 1 つ: XHTML doctype を使用していない限り、特定の要素の末尾にスラッシュを付ける必要はありません。これは自己終了タグの古風な方法でしたが、HTML5 doctype では必要ありません。:)

于 2013-07-10T02:30:34.283 に答える