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