0

ワードプレスのテーマをゼロからデザインしています。投稿にはボックスを使用しました - 1 行に 2 つの投稿です。CSS コードは次のとおりです。

#box  {
margin-bottom:10px;
margin-left:0;
margin-right:10px;
width:240px;
}
.left {
float:left;
margin-left:10px;
}

ページ内のすべてのボックスをラップするラッパーがあります。

#wrapper{
     width:980px;
     background-color:#fff;

}

<div id="wrapper">
<div id="box" class="left">
...WP tags and...
</div>
</div>

そのため、すべてのボックスがラッパーに入っています。問題は、ラッパーが表示されないことです-ページに白い背景はありませんが、フロートプロパティラッパーを削除するとすぐに機能します。どうすればそれを修正できますか!?

4

3 に答える 3

1

ラッパー要素を指定しoverflow: hiddenます。

#wrapper{
    overflow: hidden;
    width:980px;
    background-color:#fff;
}

これは、すべてのブラウザーでこれを機能させるための受け入れられた方法です。これは、clearfix の回避策よりもうまく機能し、手間もかかりません。

于 2011-04-13T21:25:47.237 に答える
1

ボックスはラッパーの上に「浮かんで」います。clear:both; を追加するだけです。#ラッパーへ。あ、ちなみに、余白に 3 つの要素を作成する必要はありません。margin:0 10px 10px 0; のように 1 行で記述できます。(上、右、下、左) また、CSS をデバッグするときに使用する必要があるちょっとしたトリックとして、border:solid 1px red; を追加します。あなたが何をしているかを見ることができます。

于 2011-04-13T19:13:17.147 に答える
0

clearfix http://www.webtoolkit.info/css-clearfix.htmlが必要です。

于 2011-04-13T18:18:08.970 に答える