web-dev-qa-db-ja.com

divに浮動子divを含めるように強制する

Wordpressで21のテーマをカスタマイズしようとしています。次の方法で設定された2列のレイアウトがあります。

<div id="main">
     <div id="primary"></div>
     <div id="secondary"></div>
</div>

そして

#main {
    clear: both;
    padding: 1.625em 0 0;
}
#primary {
    float: left;
    margin: 0;
    width: 100%;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

style.css内に私が認識していない他の関連するcssプロパティがあるかどうかはわかりません。とにかく、子divは#mainの外にあります。子divを#mainに含めるように強制するにはどうすればよいですか？ （#primaryの幅を狭くすることを除けば、私には何の効果もありません）

csswordpresshtmlcss-floatthemes
13
tic

overflow: autoを#mainに追加する必要があります。

#main {
    clear: both;
    padding: 1.625em 0 0;
    overflow: auto;
}
26
Blender

あなたの場合、クリアは子の後に実際には適用されないので、疑似要素：afterでclearfixメソッドを使用する必要があります。

#main:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; 
}

http://jsfiddle.net/zfsjb/

10
LeBen

width: 100%; position:absoluteを#mainに与えてみてください。

ここは動作中のライブデモです

1
blasteralfred Ψ