4

HTML：

<div id="wrapper">
    <div id="content">
      <div id="slider"></div>

      <div id="left"></div>

      <div id="right"></div>
    </div>
  </div>

CSS：

#wrapper
{
  background:blue;
  width:990px;
  margin:0 auto;
}

#content
{
  width:990px;
  height:auto;
}

#slider
{
  width:990px;
/* slider jquery   */
  height:auto;
}

#left
{
  float:left;
  width:490px;
}

#right
{
  float:right;
  width:490px;
}

ライブデモ：Tinkerbin

しかし、左右のdivでは青い色が表示されていません。

私がそれに与えoverflow:hiddenているならwrapper、その仕事はうまくいきます。overflowフローティングdivの親に渡す必要がありますか？

なぜ？

4

3 に答える 3

16

でコーディングするときに直面する一般的な問題の1つは、float based layoutsがにwrapper container拡張されないことです。height of the child floating elements.これを修正する一般的な解決策は、で要素を追加することclear float after the floating elements or adding a clearfix to the wrapperです。ただし、を使用することもできますoverflow property to fix this problem。これも新しいCSSのトリックではありません。それはずっと前に文書化されています。

于 2012-07-29T13:21:55.783 に答える
7

要素をフロートさせると、高さが失われたように見えます。つまり、要素は青色で、表示されません。彼に高さを与えるか、ラッパーを。でスタイリングしoverflow: hiddenます。また、要素の背景色が必要な場合は、ですbackground-color: blue。color: blue手紙用です。

于 2012-07-29T13:02:48.963 に答える
3

内にフローティング要素がある場合は、 clearfixを使用する必要があります<div>。

この問題は、フロートされた要素がコンテナボックス内にある場合に発生します。その要素は、コンテナの高さをフロートされた要素に自動的に調整しません。要素がフロートされると、フロートがフローから削除されるため、その親には要素が含まれなくなります。

<div id="wrapper">
  <div id="content">
    <div id="slider">slider</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div class="clear"></div> <!-- THIS -->
  </div>
</div>

.clear { clear: both }

ライブデモ：Tinkerbin

于 2012-07-29T13:31:23.593 に答える