0

親要素が子の高さと幅に拡張できるように、いくつかの要素をフロートさせて clearfix を適用しようとしています。

したがって、このフィドルに従ってレイアウトを設定するだけです: http://jsfiddle.net/fMjEx/

次に、要素を の中にフロートさせたいと思いました.bar。これは通常、非常に簡単です。

  1. 要素をフロートします。
  2. pie-clearfixまたはを使用して親をクリア修正しoverflow: autoます。

ただし、次の問題に遭遇しました。

  • pie-clearfix を使用すると、.picture次の要素.barもクリアに含まれます: http://jsfiddle.net/6C7WD/

  • overflow: autoまたはを使用するoverflow: hiddenと、 の幅が.barドキュメントの幅にまたがりません: http://jsfiddle.net/fv2gA/

最初に、私が持っていた1つの解決策は、作ることでし.picture position: absoluteた. ただし、このアプローチの問題は、要素がフローから取り出されることです。

レイアウトでは、.bar中のコンテンツに応じて の高さが可変です。と を指定して、 またはの高さが大きいかどうかに応じて、それらの後に来るものはその量だけ下に押し出されるようにします.bar。.picturemargin-bottom.bar.picture

これは、ソリューションとしてposition: absoluteonを使用することを除外し.pictureます。

以下を満たす解決策はありますか？

  • 内のフロートのみをクリアします.bar。
  • フローから要素を削除しません。
4

1 に答える 1

0

これは私が最終的に得た解決策です：

マークアップにラッパーを追加しました:

<div class="container">

<div class="group"> <-------------------------- This is the wrapper
    <div class="picture"></div>
    <div class="bar">
        <div class="info"> some text goes here</div>
        <div class="buttons">some other content goes here</div>
    </div>
</div>
</div>

そしてCSS：

.picture{
    width: 100px;
    height: 100px;
    float: left;
    background: green;
    margin-left: 100px;
    margin-top: 10px;
    z-index: 2;
    position: relative;
}

.bar{
    background: blue;
    margin-top: -80px;
    overflow: auto;
    width: 100%;
    float: left;
    z-index: 1;
    position: relative;
}

.group{
    margin-bottom: 10px;
}

.group:after {
    clear: both;
    content: "";
    display: table;
}

.info, .button{
    float: left;
    margin-left: 200px;
}

.container{
    overflow: auto;
}

上記のフィドル: http://jsfiddle.net/c6Lng/

于 2012-10-21T02:19:24.117 に答える