0

「ブロック フォーマット コンテキスト」(BFC) に関する記事を注意深く読んだ後でも、BFC を作成できるかどうかという基本的な質問が 1 つあります。最初に「overflow: hidden」div を書き、その後にフローティング div (どちらか左または右）。

言葉よりも例の方が簡単です。

次のような CSS レイアウトがあるとします。

.container{
    background-color:#ccc;
    padding:10px;
}
.secondary{
    float:right;
    width:200px;
    background-color:yellow;
    margin-left:10px;
    padding:10px;
}
.primary{
    overflow:hidden;
}

これは、セカンダリ コンテナのコンテンツが十分な長さでなく、メールボックスが望ましくない時点でメール本文をトリミングする場合にうまく機能します。内容が長すぎる場合、一部のメールボックスはメール コンテンツをトリミングします。その結果、表示される唯一のコンテンツは実際にはセカンダリ コンテンツです。

私の質問は、この不幸な状況を解決するためのアプローチとして来ました。2 つの JSFiddles を用意しました。このようにして、私が達成したいことを確認できますが、その手段は今のところ無視しています。

ワーキング BFC: http://jsfiddle.net/vnZ5c/2/

<div class="container">
    <div class="secondary">
        <strong>.secondary</strong>
        <p>This is a secondary content which should not be displayed in any circumstances before the main content. It exists a risk with those mailboxes that trim long emails which would make only visible this secondary content instead of the main content.</p>
    </div>
    <div class="primary">
        <strong>.primary</strong>
        <p>This is the primary content, which must appear before anything else, regardless of the length of the secondary content.</p>
        <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt ultrices leo faucibus condimentum. Suspendisse potenti. Phasellus sollicitudin ullamcorper pharetra. Sed sodales sagittis ultricies. Vestibulum feugiat lacus augue, a pellentesque elit tincidunt quis. Vestibulum fringilla aliquet urna, et porttitor velit facilisis ac. Donec euismod fermentum lacus, ac egestas dolor tincidunt vel. Pellentesque at accumsan tortor.</em></p>
    </div>
</div>

BFC が機能しない: http://jsfiddle.net/eZFXH/

<div class="container">
    <div class="primary">
        <strong>.primary</strong>
        <p>This is the primary content, which must appear before anything else, regardless of the length of the secondary content.</p>
        <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt ultrices leo faucibus condimentum. Suspendisse potenti. Phasellus sollicitudin ullamcorper pharetra. Sed sodales sagittis ultricies. Vestibulum feugiat lacus augue, a pellentesque elit tincidunt quis. Vestibulum fringilla aliquet urna, et porttitor velit facilisis ac. Donec euismod fermentum lacus, ac egestas dolor tincidunt vel. Pellentesque at accumsan tortor.</em></p>
    </div>
    <div class="secondary">
        <strong>.secondary</strong>
        <p>This is a secondary content which should not be displayed in any circumstances before the main content. It exists a risk with those mailboxes that trim long emails which would make only visible this secondary content instead of the main content.</p>
    </div>
</div>

フローティング div を 2 番目に記述して「ブロック フォーマット コンテキスト」を作成することは可能ですか?

どうもありがとう！

PS: もちろん、テーブル レイアウトの誘惑がありました...

4

0 に答える 0