0

私がこのHTMLを持っているとしましょう：

​&lt;div class = "block1">hi</div>
<div class = "block2">hi</div>

そしてこのCSS：

​.block1 {
    width:100px;
    border:1px solid;
    float: left;
}

​.block2 {
    width:100px;
    border:1px solid;
}

float:left;block1の右側にあるためにblock2が必要なのはなぜですか？block1（float：left）のプロパティは十分ではありませんか？

JsFiddle

4

2 に答える 2

3

block2デフォルトではブロックレベルの要素として表示されます。つまり、1行全体を占めます。

必ずしも;float:leftの右側に表示される必要はありません。、またはblock1を介してインラインレベル要素として表示される場合は、兄弟の横に表示されます。display:inlinedisplay:inline-block

http://jsfiddle.net/8GF4B/1/

それをさらに詳しく説明するために、代わりに設定float:leftしたと想像してみましょう。block2

.block1 {
    width:100px;
    border:1px solid;
}

​.block2 {
    width:100px;
    border:1px solid;
    float: left;
}

最初に発生するのは、block2が通常配置される場所に配置されることです。どこを見つけましょう。

  • block1はブロックレベルの要素として表示されます
  • ブロックレベルの要素は、要素の前後の両方で改行があったかのようにレンダリングされます
  • したがって、block2はデフォルトで2行目に表示されます

これで、block2は通常のフローから外され、可能な限り左にシフトされます...しかし、すでに左端にあります。これにより、block2がblock1の下に表示されます。

インライン要素とブロックレベル要素の違いについての適切な説明については、https ：//developer.mozilla.org/en-US/docs/HTML/Block-level_elementsをご覧ください。

于 2012-11-03T12:26:20.080 に答える
0

<div>elementはブロックレベルの要素であり、それが別の行にあることを意味するので、それが要素であるため、あなたはそれをあなたに要求しfloatます。block2div

于 2012-11-03T12:28:16.113 に答える