ウィンドウの中央 (左右) に配置される画像があります。左の境界線はありませんが、右の境界線があります。上の境界線がページの一番左から (画像を過ぎて) 右の境界線で停止し、下の境界線が画像の左端から始まり、窓の右側へ。上下の境界線は 2 つの異なる繰り返しの背景で構成されており、必要に応じて左の境界線も同じにすることができます。
これについてしばらく考えていましたが、解決策が思い浮かびませんでした...誰か助けてもらえますか?
どの程度柔軟に対応できるかを明確にすることをお勧めします。これには複数の方法でアプローチできます。上下の境界線をビューポートの端まで延長しますか (したがって、幅が流動的である必要があります)?
背景画像とbackground-position
スライド ドア テクニックを使用してこれを処理するか、余分なマークアップを使用して、画像を中央に配置した 3 列の流動的な幅のレイアウトを作成できます。
それはあなた次第ですが、3 列の手法divs
を使用すると、JavaScript を介して追加 (または使用したいもの) を挿入できるため、ソースに空のコンテナーがなく、背景画像の代わりに and を使用できます (したがってborder-top
、border-bottom
ページのロード時間を削減します)。
編集:明確にするために、次のアスキー図のようにしたい:
_______________
|img|_____________________
編集: 流動的な幅のレイアウトについては、CSS レイアウトに関する多数のソースの 1 つを参照して ください。
次に、左と右の列でborder-top
それぞれborder-bottom
(または、より手の込んだ境界線が必要な場合は背景画像を使用)、画像の境界線を指定し、3 つのコンテナーの高さを設定して、境界線が一列に並ぶようにします。それが役立つことを願っています。