0

2 つの列を含む div があります。左の列は動的な高さですが、右の列は常に固定の高さです。これを行うには、コンテナー div 内の両方の列 div をフロートします。しかし、コンテナ div の背景を設定したいのですが、コンテンツがないため何もしません。コンテナ div に高さを追加した場合にのみ背景色が表示されますが、これはやりたくないことです。 .

これを修正するにはどうすればよいですか?

<div id="container" style="background-color:pink" >
    <div class="col1" style="float:left;>...</div>
    <div class="col2" style="float:left; height:200px;>...</div>
</div>
4

3 に答える 3

2

これは、すべての子要素が float であるために発生します。overflow: hidden;コンテナ div に追加して、コンテンツをラップします。これが実用的なフィドルです。div の幅をコンテンツに巻き付けたい場合はdisplay: table;、コンテナの div にも追加します。

于 2013-06-03T11:12:53.237 に答える
2

フロートをクリアする必要があります。これには 3 つの方法があります。

伝統的

空の要素を追加してフロートをクリアするだけです。

<div style="background-color:pink">
  <div style="float:left;">...</div>
  <div style="float:left; height:200px;">...</div>
  <div style="clear:left"></div>
</div>

あまり良くない余分なマークアップを追加する必要があります。

オーバーフロー

少し現代的な手法は、オーバーフローを追加することです。autoまたはの値を持つことができますhidden。

<div style="background-color:pink; overflow:auto;">
  <div style="float:left;">...</div>
  <div style="float:left; height:200px;">...</div>
</div>

このソリューションにはいくつかの欠点があります (以下を参照)。

マイクロクリアフィックス

オフセットなどを使用して要素から何かを配置する必要があるため、オーバーフロー手法を使用できない場合があります。次に、Nicolas Gallagher の micro-clearfixを使用できます。

.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を追加するだけで問題なく動作し、overflow メソッドによる欠点がなく、他の余分なマークアップを追加する必要もありません。これは優れたソリューションであり、クラスを追加するだけで必要な場所で使用できます。

この最後の方法をお勧めします。とてもきれいでエレガントです。

于 2013-06-03T11:30:42.110 に答える
0

有名なコンテナの崩壊問題に苦しんでいるようです。事実上、コンテナー要素のコンテンツをフロートすると、要素はその中に含まれる最大の非フロート要素の高さまで折りたたまれます。含まれているすべての要素とコンテナのコンテンツがフローティングされている場合、含まれている要素は折りたたまれて何もなくなります。

これを修正するには 2 つのオプションがあります。まず、次のようなマークアップを追加できます...

<div id="container" style="background-color:pink" >
    <div class="col1" style="float:left;>...</div>
    <div class="col2" style="float:left; height:200px;>...</div>
    <!-- This <br /> is an unfloated element that clears the floated elements above -->
    <!-- thus acting as an HTML 'wedge' -->
    <br style="clear:both;" /> 
</div>

...しかし、これは余分なマークアップを追加します

または、このような CSS を使用してそれを行うこともできます (元のコードを想定)

#container:after   {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
#container         {display: inline-block;}
* html #container  {height: 1%;}
#container         {display: block;}

これにより、余分な HTML を追加する必要がまったくなくなります。

満足のいく妥協案は、(または同様の - 私は 'clearfix' に cf を使用します) に置き換え#containerて.cf、この問題に悩まされているものすべてに .cf クラスを適用することです。

この手法の詳細については、clearfix をググってみてください。上記のこのメソッドは、今では時代遅れになっている可能性があります-コードライブラリからこれを掘り出しました:)

于 2013-06-03T11:21:57.387 に答える