0

これは私の質問をもう少しよく説明するかもしれません:

最後の子が端の周りにのみ表示されるように、1 つの子 div をもう 1 つの子 div の上に配置する必要がありますが、2 つの子 div を一緒にスクロールして、最初の子 div の背景を静的に保つ必要があります。これは、ビューポートが最初の子になるというメサですが、最初と2番目の子のコンテンツは、一緒にスクロールできるようにコンテナ内でスクロールする必要があります。最初の子がビューポートです。

私は次のHTML構造を持っています:

<div class="container">
    <div class="text">
        <div class="row">Row</div>
        <div class="row">Row</div>
        <div class="row">Row</div>
        <div class="row">Row</div>
        <div class="row">Row</div>
        <div class="row">Row</div>
    </div>
    <div class="bars">
        <div class="a"></div>
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="b"></div>
        <div class="a"></div>
    </div>
</div>

ページのbars幅に拡張し、そのtext上に div がオーバーレイされ、周囲に余白があります。bars視覚的に対応する と同じ水平レベルで一致するように、各 div を配置しrowます。

textdiv は、周囲に余白があるように、両側からピクセルになるように配置されますx。このように、その下の端が見えますbars。

マークアップは簡単ですが、これの CSS がわかりません...

text絶対に配置されるため、マージンを持ってページの境界まで拡張できます。その中のコンテンツが境界内にとどまっている場合、これは問題ありませんが、この場合はそうではありません。

これをすべて説明するのは非常に難しいですが、基本的にここにcontainer問題がoverflow:scrollあります。背景画像があり、その下の端だけが見えるように配置されているため、 . ただし、コンテンツがコンテナーバーの境界を超える場合、これは機能しません。barsrowstextrowsposition:absolutetext. I can't add the background image tobecause it would cover the ends of the

それは理にかなっていますか？いいえ？ここに jsFiddle があります: http://jsfiddle.net/charlescarver/BskaP/2/

それでも意味不明？ここに写真があります：

ここに画像の説明を入力

何か案は？これをよりよく説明できるように、いくつか質問してください。

4

3 に答える 3

1

そこにある大量の css は必要ありません (.c​​ontainer など)。私が正しく理解していれば (100% 確信があるわけではありません)、ページの残りの部分 (バーとテキスト スクロール) の間、固定されたままの .text div に画像が必要です。

スクロールするため、テキスト div に画像を配置することはできません。むしろ、すべての行の後ろに画像があるように見え、効果が継続するように、マージンの代わりにposition: fixed使用して各 .row に画像を配置することをお勧めします。padding-bottom:20pxそれは私があなたが求めていると思う効果をあなたに与えるでしょう

http://jsfiddle.net/BskaP/5/

于 2013-03-12T02:15:12.217 に答える
-1

に追加する必要overflow:autoがありrowます。これが機能することを証明する jsfiddle を次に示します: http://jsfiddle.net/BskaP/3/ 例として、非常に長い行を追加しました。

これがあなたの望むものかどうかはわかりませんが、そうだと思います。

于 2013-03-12T01:16:58.440 に答える