2

子要素は親コンテナを引き伸ばしません。

私のコード:

html:

<div class='window'>
    <div class='wrapper'>
        <div class='short'>short</div>
        <div class='long'>long</div>
    </div>
</div>

CSS:

.window{
    width: 500px;
    height: 100px;
    overflow: auto;
    background: gray;
}

.wrapper{
    background: pink;
    border: 1px solid red;
}

.long{
    width: 700px;
    background: beige;
}

例

.long私は彼の親を伸ばしたい.wrapper。 幅は(700px).wrapperと同じでなければなりません。.long

float: leftに設定することでこれに到達できます.wrapper。

しかし、ここで何が起こるのかわかりません。なぜそれが役立つのですか? そのような行動のメカニズムは何ですか？w3c ドキュメントへのリンクを含む説明が必要です。

.wrapper幅を広げるには他に何ができますか？

4

2 に答える 2

3

デフォルトでは、.wrapperdiv は で設定した固定幅を継承しています.window。をフロートさせ、その.wrapper幅を に設定しautoて、幅が親に制限されずに拡張されるようにすることができます。

CSS:

.wrapper {
    float: left;
    width: auto;
}

例: http://jsfiddle.net/WTGAc/3/

仮説：

デフォルトでは、 の寸法は、そのwrapper親に配置された寸法に制限され.windowます。

浮動要素は、親要素によって定義されたパラメータ、つまり使用可能な幅と水平位置の範囲内にとどまります。それらは、その親要素 (または後続の他の要素) 内のテキストやその他の要素と引き続きやり取りします。その点で、ドキュメントフローから削除され、他の要素と相互作用しない絶対配置要素とはまったく異なります...しかし、それでも、配置された祖先がある場合、そのエンベロープによって制限されます祖先であり、サイズと寸法を計算するための基礎としてそれを使用します (ただし、配置された祖先の外に拡張または存在させることはできます)。

引用元

要素はフロートされ、通常のドキュメント フローの外に設定されるため、最初に定義された固定幅ではなく、親の実際の幅に拡張できるようになりました。

于 2013-05-24T15:01:39.613 に答える