3

大量のテキスト コンテンツの片側にサイドバー/コールアウト ボックスが浮かんでいるページ レイアウトを使用しています。テキスト コンテンツには、背景色が異なる通知バナーが全体に散りばめられている場合があります。

これが問題です（完全な JSFiddle here）：

望ましくない:

望ましくない動作

モックアップのテキストが示すように、ピンクの「通知」バナーが黄色のサイドバーと重なっていることに注意してください (重なっているmarginブロック要素の端ではなく、テキストをキックバックするだけです)。私はそれがもっと似ていることを望みます:

望ましい動作 ピンクの背景がサイドバーの余白で止まります。モックアップでは、通知バナーの幅を設定することでこれを実現できました (サイドバーと交差することがわかっていたため) が、その通知がページのさらに下に表示される場合、全幅に拡張されません。

この種の外観を実現し、コンテンツ内のどこに通知バナーを表示するかについて柔軟にできる構造/スタイルはありますか?

4

4 に答える 4

5

サイドバーのマージンを維持しながら、背景がサイドバーの後ろに漏れるのを防ぐためoverflow: autoに通知に追加するだけです。

これが機能する理由は、新しいブロック フォーマット コンテキストを作成するときにフロートに干渉しoverflowないためです。visible通常、これにより、ボックスが float (および存在する場合はその余白) と交差しなくなります。このため、通知ボックスの一部がフロートと交差する場合、通知ボックス全体とその内容が狭い幅に制限されることに注意してください。これは、周囲の段落と通知ボックス自体にテキストを追加/移動することで確認できます (フィドル リンクでこれを簡単に説明することはできません)。

仕様には、セクション 9.4で次のように記載されています。

ブロックの書式設定コンテキストでは、各ボックスの外側の左端が含まれているブロックの左端に接しています (右から左への書式設定の場合、右端が接しています)。これは、フロートが存在する場合でも当てはまります (ただし、ボックスのライン ボックスはフロートによって縮小される場合があります)。ただし、ボックスが新しいブロック フォーマット コンテキストを確立しない限り (この場合、フロートによってボックス自体が狭くなる可能性があります)。

セクション9.5を指すもの：

表のボーダーボックス、ブロックレベルで置き換えられた要素、または新しいブロック整形コンテキストを確立する通常の流れの要素 (「visible」以外の「overflow」を持つ要素など) は、要素自体と同じブロック フォーマット コンテキスト内の任意のフロート。必要に応じて、実装は、前述の要素を前のフロートの下に配置することによってクリアする必要がありますが、十分なスペースがある場合は、そのようなフロートに隣接して配置することができます。それらは、セクション 10.3.3 で定義されているよりも、その要素の境界ボックスを狭くすることさえあります。CSS2 は、UA がその要素を float の隣に配置できるタイミングや、その要素がどれだけ狭くなるかを定義していません。

2 番目の引用は最後に向けて気が遠くなるように聞こえますが、ここで見られる動作は非常に一貫しており、実装で逸脱が見られるような特殊なケースではありません。

于 2013-08-27T15:13:49.887 に答える
2

あなたは賢く、白い枠線を使ってその背後にあるコンテンツを隠すことができます.

このような：

.sidebar { 
   border-left: 1em solid #FFF;
}

例: http://jsfiddle.net/UrsLW/7/

そして結果：

結果

于 2013-08-27T15:04:34.677 に答える
2

SideBar を別のラッパーで囲みます

HTML:

<div id="test">
    <div class="sidebar">
    </div>
</div>

CSS:

#test
{
    /*moved from your old siderbar*/
    float:right;
    width:40%;
    padding-left:1em;
    /*essential*/
    background-color:white;
}
.sidebar
{
    padding:1em;
    background-color:#FFC;
}

ここを見てください：http://jsfiddle.net/UrsLW/11/

于 2013-08-27T15:11:35.903 に答える
0

最初に頭に浮かんだのは、CSS3 のbox-shadowを使用することでした。

.sidebar {
    float:right;
    width:40%;
    padding:1em;
    margin-left:1em;
    background-color:#FFC;
    box-shadow: 0px 0px 0px 1em #fff;
}

または、単純な境界線でも機能します。

.sidebar {
    float:right;
    width:40%;
    padding:1em;
    margin-left:1em;
    background-color:#FFC;
    border: 1em #fff solid;
}

もちろん、これは単色の背景でのみ機能します。

http://jsfiddle.net/UrsLW/5/

于 2013-08-27T15:01:39.240 に答える