0

ウィンドウの中央 (左右) に配置される画像があります。左の境界線はありませんが、右の境界線があります。上の境界線がページの一番左から (画像を過ぎて) 右の境界線で停止し、下の境界線が画像の左端から始まり、窓の右側へ。上下の境界線は 2 つの異なる繰り返しの背景で構成されており、必要に応じて左の境界線も同じにすることができます。

これについてしばらく考えていましたが、解決策が思い浮かびませんでした...誰か助けてもらえますか?

4

1 に答える 1

0

どの程度柔軟に対応できるかを明確にすることをお勧めします。これには複数の方法でアプローチできます。上下の境界線をビューポートの端まで延長しますか (したがって、幅が流動的である必要があります)?

背景画像とbackground-positionスライド ドア テクニックを使用してこれを処理するか、余分なマークアップを使用して、画像を中央に配置した 3 列の流動的な幅のレイアウトを作成できます。

それはあなた次第ですが、3 列の手法divsを使用すると、JavaScript を介して追加 (または使用したいもの) を挿入できるため、ソースに空のコンテナーがなく、背景画像の代わりに and を使用できます (したがってborder-topborder-bottomページのロード時間を削減します)。

編集:明確にするために、次のアスキー図のようにしたい:

_______________
               |img|_____________________

編集: 流動的な幅のレイアウトについては、CSS レイアウトに関する多数のソースの 1 つを参照して ください。

次に、左と右の列でborder-topそれぞれborder-bottom(または、より手の込んだ境界線が必要な場合は背景画像を使用)、画像の境界線を指定し、3 つのコンテナーの高さを設定して、境界線が一列に並ぶようにします。それが役立つことを願っています。

于 2009-02-01T23:55:27.530 に答える