html5元素不會佔用空間並在下一節溢出

我想創建一個簡歷頁面。 here是的jsfiddlehtml5元素不會佔用空間並在下一節溢出

它看起來像這樣：

<section class="ResumeItem"> 
    <header class="ResumeContentTitle" id="ResumeKnowledgeHeader"> 
     <p>Professional Knowledge</p> 
    </header> 
    <section> 
     <section class="skills"> 
         <header> 
          <h3>Strong Skills</h3> 
         </header> 
         <ul> 
          <li>PHP</li> 
          <li>jQuery</li> 
          <li>SQL</li> 
          <li>Ajax</li> 
          <li>HTML</li> 
          <li>CSS</li> 
         </ul> 
        </section> 

        <section id="ResumeKnowledge" class="ResumeContentText"> 

         <ul> 
          <li>PHP </li> 
          <li>another item </li> 
          <li>another item </li> 
          <li>another item </li> 
          <li>another item </li> 
         </ul> 
        </section> 
</section> 
<section class="ResumeItem"> 
        <header class="ResumeContentTitle" id="ResumeKnowledgeHeader"> 
         <p>Professional Knowledge</p> 
        </header> 
</section>

的事情是，UL裏不走「空間」。下一節僅考慮id =「ResumeKnowledge」部分。

I tried: 

.skills ul li{ 
    overflow: none; 
}

來源

2012-09-25 WebQube

我不清楚問題是什麼。 – j08691

http://jsfiddle.net/jp4LH/3/ –

你的問題遠非明確...你想達到什麼效果？「它不佔用空間」不夠描述。如果*確實佔用了空間，那麼您希望它看起來像什麼？這不僅可以幫助你在自己的調試中，而且還可以幫助你自己調試，但是我們也是... –

問題是該部分是浮動的，所以它坐在DOM之外。添加一個明確的解決了這個問題。

http://jsfiddle.net/jp4LH/7/

部分

來源

2012-09-25 19:18:16 user1289347

謝謝，我是一個noobie ...愚蠢的問題，我知道..感謝上帝的stackoverflow .. – WebQube

noob問題總是歡迎:) –

的問題是DOM外的浮動項目後，我只是說<div style="clear:both;"></div>。較早的答案是正確的，或者您可以添加： section.ResumeItem {clear}：both; } 如果你想保持2列在彼此旁邊浮動。

來源

2012-09-25 19:21:05

是的，我扔了一個快速編輯，讓他們並排浮動。我認爲在標記中投入div會使它更清晰。 – user1289347

發生這種情況的原因是內部section與類skills已浮動，所以外部section崩潰。一個固定是通過將

overflow: hidden

到外部，以創建新的block formatting context，它可以做到的。像這樣創建一個新的塊格式化上下文強制外部section完全包含所有內部浮動元素。

來源

2012-09-25 19:23:08 Supr

html5元素不會佔用空間並在下一節溢出

回答

相關問題