CSS制作DIV压扁

，所以这是我的HTMLCSS制作DIV压扁

<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中层是越来越 '压扁'，因为我看不到背景颜色和边框底部出现在顶部。为什么会发生？

来源

2012-11-28 praks5432

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

来源

2012-11-28 01:11:23

为什么这有帮助？ – praks5432

@ praks5432 - 它的工作原理与@kennypu所描述的相同，容器需要被'浮动'，以便'浮动'的孩子被视为渲染流的一部分。如果没有这个，孩子们不会影响容器的高度。 –

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

它被显示为“压扁”的原因是因为当您使用浮动功能时，无论您何时浮动都不被视为正常渲染流程的一部分。所以.container将它内部的浮动div视为不在那里。

来源

2012-11-28 01:18:44 kennypu

CSS制作DIV压扁

回答

相关问题