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壓扁

回答

相關問題