1

2つのdivを並べて作成しようとしています。入れてみましfloat: leftたが、親ホルダー.holder-leftとコンテンツdivの外に浮かんでいます。float: right.holder-right

どうすれば解決できますか？

CSS

div.holder {
    margin: 10px 10px 0 10px;
    width: 1002px;
}

div.holder > div.holder-left {
    float: left;
}

div.holder > div.holder-right {
    float: right;
}

HTML

<div class="holder">
    <div class="holder-left">
        aufgftf ftftfy
    </div>
    <div class="holder-right">
        afytf fttyfttyty
    </div>
</div>
4

1 に答える 1

3

迅速で汚い解決策は、プロパティdiv.holderを追加することによって変更することです。overfowこれにより、外側のdivが内側のフロートdivを適切にラップできるようになります。理由は覚えていませんが、このソリューションには奇妙な点があるため、以下の「clearfix」ソリューションを参照してください。

div.holder {
    margin: 10px 10px 0 10px;
    width: 1002px;
    overflow: hidden;
}

ただし、「clearfix」ソリューションを適切に実装する必要があります。（ここでは、上記のようにプロパティを使用する必要はありませんoverflow。）これが私が使用するclearfixソリューションのCSSです。

.group:after{
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

* html .group{ zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */

次に、以下に示すように、フロートdivのHTMLを変更します。あなたがする必要がgroupあるのは、浮動要素を含むdivにクラスを追加することです。これにより、フロートされたdivが完全に外側のdivの内側に留まります。

<div class="holder group">
    <div class="holder-left">aufgftf ftftfy</div>
    <div class="holder-right">afytf fttyfttyty</div>
</div>

このclearfixソリューションのソースは次のとおりです。

于 2012-05-18T16:55:25.423 に答える