7

コンテナーの DIV の高さを強制的に 2 つのフローティング div の子に対応させることはできますか? それを行うために使用できる派手なトリックはありますか？親 div 内に同じサイズの 2 つの div を作成しようとしています。それらの間に少し空白を入れて並べて表示したいと思います。Child2 は飛び出し、Child1 の下に移動する傾向があります。メモ Child2 にはテーブルが含まれています。浮いていいの？

HTML:

<div id="parent">
  <div id="child1"></div>
  <div id="child2">
    <table><tr><td>content</td></tr></table>
</div>
</div>

CSS:

div#parent
{
    background-color: #C6E4E0;
    border: solid 3px #017E6F;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    width:99%;
}

div#parent div
{
    width:49%;
    float:right;  
    padding:3px;  
}

div#parent div:first-child
{
    float:left;
}
4

5 に答える 5

7

これは明確な問題ではありません。彼の問題は、2 つのフローティング div が並んで表示されないことです。

まず第一に、親 div の幅を設定する必要はありません。div はブロック要素です。つまり、親の幅全体を占めるように幅を自動的に調整します (この場合、おそらく div#parent の親は体）。

幅を明示的に設定し、パディングを指定しているため、本体を超えて拡張される可能性があります。それは実際には問題ではありませんが、これと同じ知識を子フロート div に適用すると、正しいものが一番下にぶつかる理由がわかります。

まず、div の幅をパーセンテージで明示的に設定している場合、パディングを追加する必要はありません。パーセンテージ幅を扱っているため、パディングは幅に追加されるため、div 自体ではなく、div のコンテンツにパディングを追加することをお勧めします。したがって、100px の親で 49% の幅を持つ div に 10px のパディングを追加すると、49px + 10px + 10px (2 辺) の幅になり、計算された合計幅は 69px になります。

マークアップとコンテンツ、またはテストしているブラウザーを投稿していないため、div がダウンしている理由を正確に言うことはできません。考えられる可能性は 2 つあります。

  1. IE を使用しているため、テーブルが親の div を超えて拡張され、破損が発生します。テーブルの幅を親のパーセンテージなどに明示的に設定してみてください。
  2. 49% の幅 + パディング = [parent-width] - [left-div-width] より大きい。これにより、左の div と右の div が親の幅に対して広すぎるため、下にぶつかります。
于 2009-08-18T19:03:41.270 に答える
3

clearfix クラスを使用します。

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

/* Hides from IE-mac \*/
/** html .clearfix {height: 1%;}*/

.clearfix {
    display: block;
}

/* End hide from IE-mac */

次に、すべての浮動要素コンテナーでクラスを使用します。

于 2009-08-18T16:07:07.117 に答える
1 
#container { width:200px; }
.floated   { width:100px; float:left; }
.clear     { clear:both; }

<div id="container">
  <div class="floated">A</div>
  <div class="floated">B</div>
  <div class="clear"></div>
</div>
于 2009-08-18T15:58:54.077 に答える
1

私はのファンではありませんclear: both;、私はむしろジョナサンサンプソンズの例でこれを行います：

#container { width:200px; overflow: hidden; }
.floated   { width:100px; float:left; }

 

<div id="container">
  <div class="floated">A</div>
  <div class="floated">B</div>
</div>
于 2009-08-18T16:02:02.913 に答える
1

ちなみに、あなたが欲しい

div#parent > div { float:left; }

それ以外の

div#parent div:first-child { float:left; }

これはまだIE6に対応していませんが、両方の子DIVをフロートさせます。

于 2009-08-18T16:02:55.160 に答える