2

私は理解できない明確なフロートの問題を抱えています。これは HTML コードです。 

 <div id="main">
   <div id="primary">
      <div id="content" role="main">
      </div><!-- #content -->
   </div><!-- #primary -->
   <div id="secondary">
   <div><!-- #secondary -->
 </div><!-- #main -->

各要素の CSS は次のとおりです。

#main {
clear: both;
}

#primary {
float: left;
width: 100%;
margin: 0 -40% 0 0!important;
}

#content {
background: none repeat scroll 0 0 white;
box-shadow: 0px 10px 10px 2px #888;
float: left;
margin: 0 12.3%!important;
position: relative;
width: auto;
 }

#secondary {
float: right;
margin-right: 15%;
width: 22%;
position: relative;
padding-top: 170px;
}

ウェブサイトはワードプレスで構築されているためmain、header.php で始まり、footer.php で終わります。およびdiv は各ページ テンプレートprimaryでcontent開始および終了し、secondarydiv は、div の終了後に各ページ テンプレートで呼び出されます (サイドバーを取得) primary。

問題は、プライマリ div が終了した直後にコンテンツ div が停止し、セカンダリ div が下に拡張し続けることです。コンテンツ div は、セカンダリまたはメイン div が終了するドキュメントの最後まで拡張する必要があります。

このWeb サイトでコードをライブで表示し、それが引き起こしている問題を確認できます。

4

4 に答える 4

1

そのためfloat

overflow propertyあなたの親に与えなさい。

または追加のdivを作成してclear:both

フロートベースのレイアウトでコーディングするときに直面する一般的な問題の1つは、ラッパーコンテナが子のフローティング要素の高さまで拡張されないことです。これを修正する一般的な解決策はclear float、フローティング要素の後に要素を追加するか、clearfixラッパーに。ただし、overflowプロパティを使用してこの問題を修正することもできます。これも新しいCSSのトリックではありません。それはずっと前に文書化されています。

于 2012-08-02T12:10:25.087 に答える
0

問題は、「secondary」要素がサイトの「content」要素に含まれていないため、「content」が「secondary」に対応するように成長しないことです。

HTML構造を再考する必要があります。

于 2012-08-02T12:10:53.693 に答える
0

cssのclearプロパティは、コード内の new に適用する必要がありdivます。親要素内のすべての浮動要素の下で div を開始することで機能します。次のようになります。

<div id="main">
  <div id="primary">
    <div id="content" role="main">
    </div>
  </div>
  <div id="secondary">
  <div>
  <div style="clear: both"></div> <!-- Don't do inline styles -->
</div>

それはそれを行う必要があります。clear: bothon #main'sCSSも削除する必要があります。それは必要はありません。

于 2012-08-02T12:09:36.837 に答える
0

親要素は、浮動要素を含むように展開されることはありません。その要素を展開してそれらを含めるにはoverflow: auto、親に追加して、ほとんどの場合、要素をオーバーフローする浮動要素が含まれるようにします。それを適用する要素を見つけることができなかったので、これを引き起こすために他のことをした可能性があります. position:absolute には、通常のフローから取り出され、親要素に含まれないという同じ問題があります。

于 2012-08-02T12:05:46.280 に答える