0

divの左右の境界線に2つの繰り返し背景画像を配置する必要があります。divの幅や高さがわかりません。私は、左の境界線をdivに配置し、右の境界線を右に浮かせることを考えました。

これが私のレイアウトです:http: //jsfiddle.net/WmLhV/

Firefoxでは問題なく動作しますが、他のブラウザでは、ブラウザウィンドウが短すぎてスクロールバーが表示されると、フロートが消えます。ご覧のとおり、コンテナは表示されています:table-row。これを変更できないか、レイアウトが壊れます...画像を右に配置するより良い方法はありますか?フロートがなくても?

4

2 に答える 2

2

100%の高さを使用する場合は、位置を使用する必要があります。このフィドルを確認してください私は位置http://jsfiddle.net/WmLhV/4/を介してこれを行いました

于 2012-06-18T07:43:36.493 に答える
0

右に浮いているあなた<div>には高さがありません。Firefoxは、内容が空の場合でも100%の高さを理解しているように見え<div>ますが、たとえばIE9は理解していません。

別のアプローチの1つ<div>は、テキスト60pxpadding-leftと60pxを含むを指定しpadding-right、それに背景画像を適用することです(注:複数の背景画像はCSS3対応のブラウザーでのみ機能します)。パディングは基本的に背景画像用の空のスペースを作成し、常にテキストと同じ高さです。

さらに、もう少し複雑なアプローチは、内側の領域を3つ(左、中央、右)に分割し、設定display: table-cell(またはテーブルを使用)してから、基本的に左右のセルの高さをそれに応じて調整できるようにすることです。テキストを含む中央のセルの高さ。これにより、中央のテキストの高さに応じて側面の背景画像が表示されます---標準的なテーブルの動作。これにより、フロートが不要になります。display: table-cellIE6 / IE7ではサポートされていませんが、通常のHTMLテーブルで問題なく動作します。

于 2012-06-17T13:17:35.590 に答える