7

CSS Auto Marginが他の要素を押し下げるのと同様の問題があります。右側のフローティングサイドバーが、メインの非フローティングコンテンツdivの下に押し下げられます。提案された答えは機能します。マークアップの順序を逆にして、非フロートdivの前にフロートdivを書き出します。

たとえば、これは次のとおりです。

<div class="container">
    <div id="non-floating-content">
        fooburg content
    </div>
    <div id="float-right">
        test right
    </div>
</div>

次のように厄介に再注文する必要があります：

<div class="container">
    <div id="float-right">
        test right
    </div>
    <div id="non-floating-content">
        fooburg content
    </div>
</div>

では、なぜこれも並べ替えなしで機能するのでしょうか。グリッドベースの設計を使用した最大幅と最小幅の弾性レイアウトですか。ライブデモをご覧ください。マークアップの順序は依然として賢明です。floatdivは非floatdivの後に書き出されます。それでも、フロートはページに押し下げられません。

適切なスタイルを設定するために、テーマPHPをハックする必要がない（divを並べ替える）必要がないためです。

解決策は「divを並べ替える」ことであると述べている他の投稿：

4

2 に答える 2

3

これが機能する理由は、包含要素に高さがないためです。包含要素内にフローティング要素しかない場合、その要素は高さ 0 に折りたたまれます。たとえば、overflow: hidden; を追加するとします。#fluidColumnContainer に対しては、明確な修正として機能し、フローティング要素を含むようにコンテナーを拡張します。次に、右にフローティングされた要素が再びドロップダウンします。

于 2011-07-06T03:35:51.707 に答える
0

リンクしたものが機能する理由は、他の列もフローティングされているためです

于 2011-07-06T03:11:08.227 に答える