0

コンテンツ領域 (左と右の両方) から伸びる単純なリボンのような見出しを実装して、画像の背景 (css3 トリックなし) で 3D 効果を表示します。

フローティング、負のマージン、および最終的に相対的な配置を試みましたが、私の問題は、私が試したすべてのソリューションがコンテンツのスクロール可能な幅を増やしたことです(右に拡張しました)。リボンを「背景効果」として保持し、コンテンツのスクロール可能な幅を維持したいと思います。

私の単純化された作業例をチェックしてください: http://jsfiddle.net/c5cVG/16/

body {
    background: blue;
}

body>div {
    width: 200px;
    margin: 0 auto;
    background: white;
}

body>div>p {
    padding: 5px;
}

body>div>h2 {
    overflow: hidden;
    padding: 10px 20px 5px;
    background: red;
    width: 190px;
    left: -15px;
    position: relative; 
}

ビューポートの幅を 215px 未満に設定すると、赤い「リボン」の左端の拡張部分がビューポートの外側に留まり、水平スコルバーを使用して内側にスクロールできないことがわかります。

右端の拡張 (白い領域をオーバーフロー) で同じ効果を得たいのですが、スクロール可能な領域の右端を押して、それ自体をスクロール可能にします。

ヘルプやデモをいただければ幸いです。

4

1 に答える 1

0

OK、このスレッドで私にぴったりの解決策を見つけました: https://stackoverflow.com/a/2650215/2084434 (Nikolaos Dimopoulos による回答)

コンテンツ全体を別の div でラップして適用する

#wrapper {
    width: 100%;
    overflow: hidden;
    min-width: 200px;
}

正常に動作します。更新されたフィドルは次のとおりです。http://jsfiddle.net/jJaxp/2/

于 2013-02-19T08:13:48.563 に答える