1

スタックオーバーフローに関する質問を見ました。

以下のマークアップを検討してください：

<div id="box_wrap">
    <div id="box1">
        <h2>Box1 text</h2>
        <p>Lorem Ipsum</p>
    </div>
    <div id="box2">
        <h2>Box2 text</h2>
        <p>Lorem Ipsum</p>
        <p>Text</p>
    </div>
</div

CSSを使用:

#box1 {
    background-color: blue;
    width: 30%;
    float: left;
}

#box2 {
    background-color: red;
    width: 30%;
}

divは次々と表示されます（対応するフィドル）

ここに画像の説明を入力

しかし、 ie#box2の幅よりも高い幅を に与えると、次のことが起こります: (対応するフィドル)#box1width:34%

ここに画像の説明を入力

の幅がさらに大きい場合#box2（ の幅と比較して#box1）、つまりwidth:50%、最終的に目的の効果が現れます。(対応フィドル)

ここに画像の説明を入力

青いボックス、float:leftつまり#box1hasを持つwidth:30%ボックスと、赤いボックス、つまり float プロパティのないボックス、つまり#box2hasに注意してくださいwidth:50%。それでも、青は赤よりも大きくレンダリングされます。

また、幅がない場合、または幅width:autoが#box2ある場合は、目的の効果が得られます。

目的の効果:#div2の右側に配置する必要があります#div1

何が起こっているのか、誰か説明してもらえますか? 私は何が欠けていますか？

（適切なタイトルでこの質問を提起する方法も知りませんでした）

4

1 に答える 1

1

浮動要素の後の要素は、その内容が浮動要素にラップされます。両方の div の幅が同じである最初のケースでは、2 番目の div は最初の div をラップできません。

2 番目のケースでは、box2 は box1 よりも幅が広くなり、その内容を box1 の周りに可能な限りラップします。

box2 が box1 よりも十分に広い 3 番目のケースでは、box1 を包み込んでいますが、box1 の下に表示するのに十分なコンテンツがありません。box2 にさらにコンテンツを追加すると、http://jsfiddle.net/GbDqT/4/が明確になります。この jsfiddle にはwidth: auto、box2 といくつかの追加コンテンツが含まれています。

更新: box2 が box1よりも幅が狭く見える理由は、(ご想像のとおり) box1 がbox2の上に重なっているからです。そのため、box2 のほとんどの部分は box1 の下に隠されていますが、box1 がフローティングしているため、box2 のコンテンツは右に押し出されています。

ソース: developer.mozilla

于 2013-04-14T13:56:36.647 に答える