css - 膨張容器をラップする

Question

CSS で展開可能なコンテナーを使用しています。折りたたむとこんな感じ(下)

最初のアイテムを展開すると、これが発生します（以下）

左のフロートが問題を引き起こしているように見えますが、それがなければフォーマットはオフです。展開後に他のすべてをラップするにはどうすればよいですか。

div.wrapper{
    float:left;
    position:relative;
    margin: 30px 30px 30px 30px;
}

score 0 · Accepted Answer

0

div.wrapper{
    display:inline-block;
    position:relative;
    margin: 30px 30px 30px 30px;
}

于 2013-07-18T19:59:52.700 に答える

score 0 · Accepted Answer

フローを「クリア」する必要があります。

.wrapper {
    float:left;
    clear:both;
    position:relative;
    margin: 30px 30px 30px 30px;
}

表示プロパティを変更したり、「ブロック」以外のように動作させる必要はありません。

ここで視覚的に境界線を追加しました。

score 0 · Accepted Answer

.wrapper の終了 div タグの直後に、明確な両方の div を挿入します。

// html code
// wrapper contents
</div>
<div style="clear: both"></div>

3 に答える 3