Question

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

Answer 1

您需要在.container的结束标记之前添加<div class='clear'></div>。

它被显示为“压扁”的原因是因为当你使用浮动时，你浮动的任何东西都不被认为是常规渲染流程的一部分。所以.container会把它里面漂浮的div视为不存在。

Answer 2

您需要将float: left添加到.container。

CSS制作div被压扁了

2 个答案: