1

私は周りを見回しましたが、比較的簡単なはずですが、これを行う方法を見つけることができませんでした。横にスクロールしたいページがあり、両方ともウィンドウサイズに合うように半分に分割されています。その部分は十分に簡単ですが、次にやりたいのは、右側のdiv（ページの読み込み時に非表示）を左側のdivよりもわずかに40px程度突き出すようにすることです。これにより、それ。

これがすでにある方法の基礎です-jsFiddle

質問が理にかなっていることを願っています。私はposition:absolute;これまでたくさんの組み合わせを試しましたが、喜びはありません。どんな助けでも素晴らしいでしょう。

4

3 に答える 3

2

私があなたを正しく理解していれば、ビューポートの外にある場合でもユーザーが発見できるように、右側の div を左側の div の端から「覗く」必要があります。

これを行う最も簡単な方法は、要素に position: relative を設定し、左の値を -40px に設定することです。これにより、要素が「ピーク」になります。ここを参照してください: http://jsfiddle.net/NUWqE/1/

于 2012-05-17T23:50:01.663 に答える
1

したがって、固定幅の「ピーク」を探している場合、以下の答えはどのように適合しますか:

http://jsfiddle.net/NUWqE/1/

#wrapper {
    width: 200%;
    position:relative;
}

#left {
    float: left;
    width: 50%;
    background-color: red;
    margin-right: -40px;
}

#right {
    float: right;
    width: 50%;
    background-color: aqua;
    position: relative;
    padding-left: 40px;
}

内部の要素のパディングを調整する必要があることは明らか#rightですが、コンテンツをどのようにスタイルしたいかによっては、おそらく何らかの方法で調整することになるでしょう。うまくいけば、これはあなたが探しているものです。

于 2012-05-19T14:43:00.440 に答える
1

私はあなたが探しているものを正確に誤解しているかもしれませんが、次のことで div をぶつけずに問題を解決できますleft. こうすることで、ピクセルと % が混在することがなくなり、右側の空白の問題に対処する必要がなくなります#right。

#wrapper {
    width: 200%;
    position:relative;
}

#left {
    width: 45%;
    float: left;
    background-color: red;
}

#right {
    width: 55%;
    background-color: aqua;
    position: absolute;
    right: 0;
}
于 2012-05-18T10:21:02.040 に答える