2

私はこのHTMLを持っています：

<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;
}

これはこれになります：

Jsfiddle

そして2番目のケースでは、私はこのCSSを持っています：

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

.block2 {
    border:1px solid;
}

これはこれになります：

Jsfiddle

幅を設定すると、2番目のdivが最初のdivと並んでいないのはなぜですか？2番目のdivを並べて100pxにしたい場合はどうなりますか？float：leftを設定した場合; それはそれをします、しかしなぜですか？

4

2 に答える 2

3

幅を秒単位で指定すると、それdivに使用する必要がありますfloat: left;。これdivは、ブロックレベルの要素であるため、幅を指定しない場合は、使用可能な残りのスペースを占有します。幅を定義すると、スペースが利用可能な場合は、他のフロートdivのほかにフロートします。正しくフロートするには、次を使用する必要があります。float: right

デモ

編集：より良い理解...

幅を定義しない場合

------------------------------------------
               total space                     Legend (/ - empty space)

------------- Example 1 ----------------
div1(floated left) ///////////////////////
                   ^---------------------^
                     This space will be taken 
                by the div which is without width
------------- Example 2 ----------------
div1(floated left)
div2(same size as 1 wont float unless you give float: left;)

 ------------- Example 3 ----------------
 div1(floated left) div2(besides div 1 if widths are different without giving float left)
------------------------------------------

あなたが言ったように、幅を指定すると左に浮くはずですが、リファレンスdiv2に与えたものと同じ幅を与えているので、2番目のdivに言うを変更すると機能します...デモdiv1 150px

ただし、2番目のdivをフロートする前にフロートをクリアすると、他の1以外にdivがフロートすることはありません。この例を参照してください。

于 2012-11-03T13:40:03.377 に答える
0

Floatは CSS ポジショニング プロパティです。

最初のブロックでは、フロートを左に定義していますが、フローティングを閉じていません。そのためには、使用する必要がありますclear:both;

更新された結果を表示:

DifferenceBetweenFloatLeftAndRight

jsFiddleWithClearingFloat

于 2012-11-03T13:56:37.400 に答える