0

div が左または右にフロートされるたびに、コンテナ div からオーバーフローします。float プロパティが削除された場合、div はコンテナー div に収まります。これはどうして起きているのでしょうか？教えてください。http://jsfiddle.net/ZtJZS/で私の jsfiddle を参照してください。ばかげているのは私のコードです:-

<div class="main">
<div class="left-content">
    This is an example content<br />
    This is an example content<br />
    This is an example content<br />

 </div>
 </div>

CSSコードは私のフィドルにあります...よろしくお願いします。

4

4 に答える 4

1

これがフローティング アイテムの処理方法です。フローティング コンテンツは、親アイテムの高さには「カウントされません」。これを回避するには、いくつかのオプションを選択する必要があります。

  • このバージョンの fiddle で.main見られるように、 div もフローティングにします。ただし、これはレイアウトによっては受け入れられない場合があります。
  • overflow:auto外側の div を内側の div スパンにするために使用します。ここで説明されている「新しいソリューション」は非常にうまく機能します: http://www.quirksmode.org/css/clearing.html
于 2013-05-20T08:13:17.387 に答える
1

overflow:hidden; を追加できます。あなたのメインスタイルに。これにより、コインテイナーがストリーチします。http://jsfiddle.net/ZtJZS/4/を参照してください

div.main{
   width:90%;
   padding:15px;
   border:1px solid #000;
   overflow: hidden
}

垂直ストリーチを制限し、垂直スクロールバーを追加してコンテナをスクロール可能にする場合は、スタイルに高さを追加します

于 2013-05-20T08:13:47.177 に答える
1

また、メイン div の最後に div を配置することもできます。

<div class="main">
<div class="left-content">
    This is an example content<br />
    This is an example content<br />
    This is an example content<br />

 </div>
<div style="clear:both"></div>
</div>
于 2013-05-20T08:15:19.800 に答える
1

必要なのはCSS の clear fixです。含まれている の高さをクリアしdivます。

スタイルシートに次を追加します。

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

そして、cfクラスを含む に追加しますdiv。

そして、ここに例がありjsFiddleます。

于 2013-05-20T08:10:22.023 に答える