0

3 つの内部 div がすべて左に浮いています。それらは、幅 100% の親 div にラップされます。最初の内部 div を特定の幅に設定してから、次の div を x 背景を繰り返すように設定し、右側の div をその隣に配置します。

バックグラウンドスプライトを保持するだけのコンテンツはありません。したがって、左の div、中央の div、および右の div があります。中央のものは並べて表示され、外側のものは表示されません。私が抱えている問題は、特定の幅が必要であるか、背景が表示されないことです.中央のものを表示する方法はありますか. 幅 100% パーセントを試しましたが、何もしませんでした。私がそれを機能させる唯一の方法は、親の表示をテーブルに設定することです。そして、テーブルセルへの内側のもの。ただし、これは IE7 ではサポートされていません。

            <div id="subNav">
                <div class="subNav-left"></div>
                <div class="subNav-middle"></div>
                <div class="subNav-right"></div>
            </div>
4

1 に答える 1

1

流動的な背景を表示したいとのことですが。最初のdivはストリップの左側を示し、3番目のdivは最後の部分を示し、中央のdivは背景を繰り返して流動的にすることができます。余分なコーディングなしでこれを実現するには、繰り返しの背景をメインdivに割り当て、2つの内部divをそれぞれの背景でフロートさせます。

<div id="subNav">
    <div class="subNav-left"></div>
    <div class="subNav-right"></div>
    <div class="clear"></div>
</div>

そしてcss：

<style>
#subNav{
    background: url(repeating_bk.png) top left repeat-x;
    width:100%;
}
.subNav-left{
    width: 50px; /* specified */
    height: 20px; /* specified */
    background: url(left.png) top left no-repeat;
    float:left;
}
.subNav-right{
    width: 50px; /* specified */
    height: 20px; /* specified */
    background: url(right.png) top right no-repeat;
    float:right;
}
.clear { clear:both; }
</style>

それが役に立てば幸い。

于 2012-05-03T23:51:27.370 に答える