0

私はページレイアウトでこの問題を抱えており、正気に見続けるにはあまりにも長い間戦ってきました。全体的なページレイアウトは、標準の2列です。メイン列の右側に1つの狭い列があり（float: right）、ページの残りの部分がメイン領域になっています。

これで、メインエリア内に、メインエリアの右端に沿って浮かぶ必要のあるコンテンツがあります。これは問題ありません。ただし、メインエリアのフローティング部分の下にコンテンツを配置する必要がありますが、右の大きな列の下には配置しないでください。その方法がわかりません。

これが私がやろうとしていることのjsfiddleです：http：//jsfiddle.net/rx7Pd/

どんな助けでも大歓迎です。

4

2 に答える 2

0

overflow: autoまたはoverflow: hiddenをメインコンテナに追加します。

更新された例：http：//jsfiddle.net/TT8QF/

これは、浮動小数点数のクリアに関連する一般的な修正です。こことここでいくつかの情報を見つけることができます。

親要素にもこの修正を使用すると、HTMLコードの下部にある醜いクリアdivを取り除くことができます。ただ見てください：

更新された例：http：//jsfiddle.net/bNS98/

于 2012-05-15T16:05:31.573 に答える
0

このようなものが欲しいですか？（オンラインデモ）

ここに画像の説明を入力してください

メインコンテンツのラッパーとその使用display: table-cellは、このトリックの主なアイデアです。

html

    /* full html markup is on my demo */
    …
    <div class="right-main">
            right-floating part of main area.
    </div>
    <div id="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget risus libero. Nunc ornare pretium quam, a blandit magna suscipit viverra. Sed eu metus ut justo viverra tempus id in magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vitae eros nec mauris vestibulum dictum.
    </div>
    <div id="rest">
        I want this to be below the main
        right column but not below the
        overall right column
    </div>
    …

css

/* full css code is on my demo */
…
#content {
    display: table-cell
}
…
于 2012-05-15T16:29:27.420 に答える