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 正在被“压扁”，因为我看不到背景颜色并且边框底部出现在顶部。为什么会这样？

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 回答