1

達成したいこと

  • 中央揃えのテキスト コンテンツの背後にある 2 つの重複する背景 div。
    • テキスト コンテンツ div の左下に 1 つ。
    • テキスト コンテンツ div の右上に 1 つ。
    • 両方とも、テキスト コンテンツより少し遅れている必要があります。
    • どちらもテキスト div に添付する必要があります。
  • 水平スクロールバーは、ウィンドウの幅が の幅よりも小さい場合にのみ表示されますdiv.text。
  • さらに、2 つの背景 div が表示領域の外に出た場合、水平スクロールバーを有効にしないでください。

私がすでに持っているもの

問題

ここで、青と赤のボックスが表示領域外になるようにウィンドウの幅を縮小すると、水平スクロールバーが表示されます。ただし、display: none;オンdiv.rightにするとスクロールバーが表示されません。

div.right青と赤のボックスがウィンドウ フレームによって切り取られた場合に、水平スクロールバーが非表示のままになるように、必要な機能を取得するにはどうすればよいですか? これに対するクロスブラウザ互換の優れたソリューションはありますか?

編集

私の実際のサイトでは、赤と青のボックスに画像が入るので、bg 画像を半分に切り、小さい部分をbackground-imageコンテンツ div として設定するなどの解決策も検討しています。

4

2 に答える 2

1

を使用して本体を設定するCSSだけで、それを行うことができます。CSS3 Calcposition: relative

ライブデモ: http://jsfiddle.net/AMC93/

HTML

<div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="text">Lorem ipsum dolor sit amet, etc</div>

CSS

html, body {
    padding: 0;
    margin: 0;
    position: relative;
}
.wrapper {
    position: absolute;
    overflow: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.right {
    margin: 0 auto;
    position:absolute;
    background-color: red;
    width: 100px;
    height: 100px;
    z-index: -1;
    top: 0;
    right: calc(50% - 230px);
}
.left {
    margin: 0 auto;
    position:absolute;
    background-color: blue;
    width: 100px;
    height: 100px;
    z-index: -2;
    left: calc(50% - 230px);
    bottom: 0;
}
.text {
    width: 300px;
    min-height: 500px;
    height: auto;
    z-index: 800;
    text-align: justify;
    margin: 0 auto;
    overflow-x: auto;
}
于 2013-03-29T10:21:41.267 に答える
0

以下を使用してください。問題が解決することを願っています

$('.left').css('left', 0);
$('.right').css('right', 0);

この解決策を試してください

于 2013-03-29T10:00:29.597 に答える