2

他の2つのセクションをラップするHTMLセクション「all」があります。他の2つのセクションに入れたものの長さに基づいて、「すべて」のセクションの高さをWebサイトで調整するのに問題があります。

<section id="all">
   <section id="left_content">
      <p>Something here.</p>            
   </section>
   <section id="right_content">
      <p>Something here.</p>
   </section>
</section>

現在、高さを700pxの固定サイズに設定しています。CSSで、そのセクションの高さをleft_contentセクションとright_contentセクションのサイズに関連付けることができるかどうか疑問に思いました。

#all {
    width: 900px;
    height: 700px;
    margin: 0 auto;
    padding-top: 20px;
    background: #F4F4F4;
}

#left_content {
    float: left;
    width: 570px;
    margin-top:-20px;
    padding: 0px 20px 10px 20px;
    line-height: 25px;
    font-size: 12px;
}

#right_content {
    border-left:4px solid #cccccc;
    float: right;
    width: 250px;
    padding: 0px 10px 20px 20px;
    line-height: 20px;
    font-size: 12px;
}
4

2 に答える 2

7
  • #all高さをあげないで
  • フロートをクリアする

子アイテムがフローティングしている間、ラッパーは高さを決定できません。フローティングを「終了」する要素が必要です。<div style='clear:both'></div>フロートをクリアする一般的な方法です。Clearfixは別の手法です。

詳細: http://css-tricks.com/all-about-floats/

于 2012-04-17T17:45:11.293 に答える
2

#all の高さ宣言を削除します (Diodeus が言ったように)。次に、2 つのコンテンツ div の下にクリア要素 (フッターなど) を適用するか、div #all に clearfix を適用する必要があります。

例えば：

/* For modern browsers */
#all:before,
#all:after {
    content:"";
    display:table;
}

#all:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
#all {
    zoom:1;
}

これはNicolas Gallagher の優れた micro clearfix の直接コピー & ペーストです。

于 2012-04-17T17:52:58.837 に答える