1

これは私のhtmlです

<div class="container midLevel" id="quizInfo">
    <div class="quizDetailsContainer floatLeft" id="quizDescriptionContainer">
        <text class="quizPresentationHeader" id="quizTitle">Test QuizTitle - replaced by handlebars</text>
        <text class="quizPresentationSubHeader" id="quizDescription">TestDescription- replaced by handlebars</text>
    </div>
    <div class="quizDetailsContainer floatRight" id="quizCreatorContainer">
        <a href="#" class="quizPresentationHeader" id="quizUserName">Test User Name</a>
        <div class="container lowLevel" id="quizUserContentContainer">
            <ol>
                <li>
                    <text class="quizPresentationText">Test User Content</text>
                </li>
                <li>
                    <text class="quizPresentationText">Test User Content</text>
                </li>
                <li>
                    <text class="quizPresentationText">Test User Content</text>
                </li>
            </ol>
        </div>
    </div>

</div>

これは私のCSSです-

.container{
    background:#F2F2F2;
}

.midLevel{
    background:#BDBDBD;
    border-bottom-style:solid;
    border-width:2px;
}

.floatRight{
    float:right;
}
.floatLeft{
    float:left;
}

.clear{
    clear:both;
}

現在、.container midLevel は、背景色が見えず、border-bottom が上部に表示されているため、「押しつぶされ」ています。なぜそれが起こっているのですか？

4

2 に答える 2

1

<div class='clear'></div>.container の終了タグの前にを追加する必要があります。

「押しつぶされた」と表示される理由は、フロートを使用する場合、フロートするものは通常のレンダリング フローの一部と見なされないためです。そのため、.container はその中にあるフロート div をそこにないかのように扱います。

于 2012-11-28T01:18:44.477 に答える
0

float: leftに追加する必要があります.container。

于 2012-11-28T01:11:23.123 に答える