0

「吹き出し」ヘッダーの bg として 3 つの画像 (左、繰り返し、右) を使用しようとしていますが、中央を繰り返してコンテナー div を埋めることができません。

これがその場所です（「こんにちは」が付いた灰色のバブル）http://www.dev.inside-guides.co.uk/brentwood/pages/index.html

CSSは次のとおりです。

.right-nav .speech-left {float:left;background:url(/images/speech-left.png) no-repeat;width:55px;height:47px;}
.right-nav h2.speech-repeat {display:block;float:left;background:url(/images/speech-repeat.png) repeat-x;height:47px;}
.right-nav .speech-right  {float:left;background:url(/images/speech-right.png) no-repeat;width:10px;height:47px;}

そしてhtml：

<div class="bg clearfix" style="width:100%;">
<div class="speech-left"></div>
<h2 class="speech-repeat">hello</h2>
<div class="speech-right"></div>
</div>

どんな助けでも大歓迎です。

4

2 に答える 2

0

中間要素もフロートする必要がある場合があります。

.right-nav h2.speech-repeat {
    background: url(/images/speech-repeat.png) repeat-x;
    height: 47px;
    float: left;
}
于 2012-07-27T10:49:37.830 に答える
0

画像を別の方法で分割することをお勧めします。現時点では機能しますが、左の画像には下部のバブルに粘着性のビットが含まれているため、左の部分が完全に終了するまでバブルの中央部分が開始できません。

マージンを使用して中央部分をオフセットし、左の画像の上にテキストを表示することもできますが、9 つのパッチが機能するのと同じ方法で行う傾向があります。

ここに画像の説明を入力

この種の構造を使用すると、明らかにより多くの画像が使用されますが、テキストの量に合わせて縦方向と横方向の両方のサイズを変更できるため、より良い結果が得られます。

また、9 つのセグメントを使用しているからといって、それ以上使用できないわけではありません。下部セクションに沿ってより多くを使用すると、粘着アウトビットを同じスケールに保ちながら、周囲の下部ピースが拡張して必要な領域を埋めることができます.

于 2012-07-27T11:42:39.000 に答える