3

これを行うためのより効率的な方法です...何らかの理由で、これは古い方法のように感じます。

私はこのページをここ (I'm re-creating a lynda.com webpage for a lesson)に持っていますが、ラッパーはセクションを実際にはラップしませんid="trailInfo"。

そのためには、br class="br_clear"/を追加します

これを行うより正しい方法はありますか？セクションに追加clear=bothしても機能しない場合は、に追加する必要がありbrます。ありがとう！

4

4 に答える 4

7

overflow:hidden親 div 内のプロパティで CSS を更新します。

#wrapper {
    background-color: #FFFFFF;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 960px;
}

Explanation About Clearing floats

float ベースのレイアウトでよくある問題は、子の float divに対応するために親 divが引き伸ばされたくないということです。親 divの周りに境界線を追加する場合は、何らかの方法でブラウザーに命令して、親 divを完全に伸ばす必要があります。

あなたが直面していた問題を見てください：デモ

その時点でフロートをクリアしなかったためです。

したがって、この問題の古い解決策はclear:both;

以下のコードのように、子フロート要素の後に余分な div を追加すると、フロートがクリアされます。

<div class="parent">
  <div class="left-child"></div>
  <div class="right-child"></div>
  <div style="clear:both;"></div>
</div>

新しい解決策はoverflow:hidden; 、これを与えるoverflow:hiddenと、親 div内のすべての子フロート要素parent divが自動的にクリアされることです。

新しいソリューションのデモをご覧ください: tinkerbin.com/WKqFS7Lc

于 2012-09-04T12:23:03.733 に答える
0

こんにちは今与える#wrapper overflow:hidden;

このように

#wrapper{
overflow:hidden;
}

デモ

于 2012-09-04T12:23:27.807 に答える
0

height: auto;ラッパー クラスに追加します。できます

于 2012-09-04T12:24:04.367 に答える
0

overflow:hidden; を使用する必要があります。あなたのラッパーのプロパティ。

#wrapper{
overflow:hidden;
height:auto;
}
于 2012-09-04T12:32:47.610 に答える