div不與內容重疊的內容拉伸

我有一個名爲portfolio-container的div，其中包含2個圖像，每個圖像下方有一個段落。問題是他div不能垂直拉伸，所以我的圖像和段落現在與我的頁腳重疊。我試圖設置display: inline-block到節元素，容器divs，列表元素和圖像，但迄今爲止沒有任何工作。div不與內容重疊的內容拉伸

/******************************************** 
 
PORTFOLIO 
 
********************************************/ 
 

 
#portfolio { 
 
\t display: inline-block; 
 
} 
 

 
.portfolio-header { 
 
\t background-color: #0e2951; 
 
\t color: #fff; 
 
\t margin: 1em 0 0 0; 
 
\t font-size: 1.5em; 
 
\t padding: 0.1em 0.5em; 
 
} 
 

 
.portfolio-header.p { 
 
\t margin: 0; 
 
} 
 

 
.portfolio-container { 
 
\t margin: 0 0 1.5em 0; 
 
\t background-color: red; 
 
\t height:100px; 
 
\t background-color: #3d7ddd; 
 
} 
 

 
.portfolio-container ul { 
 
\t margin: 0; 
 
\t list-style: none; 
 
\t padding: 0; 
 
} 
 

 
.portfolio-container li { 
 
\t width: 80%; 
 
\t margin: 0 auto; 
 

 
} 
 

 
.portfolio-container li p { 
 
\t margin: 0 0 1em 0; 
 
\t background-color: #b1caf1; 
 
} 
 

 
.portfolio-image { 
 
\t max-width: 100%; 
 
\t margin: 0; 
 
\t float: left; 
 
} 
 

 

 
/******************************************** 
 
FOOTER 
 
********************************************/ 
 

 
footer { 
 
\t border-bottom: solid 0.5em #0e2951; 
 
\t background-color: #000000; 
 
} 
 

 
.contact-icon-box { 
 
\t width: 33.333%; 
 
\t float: left; 
 
\t margin-top: 1.5em; 
 
} 
 
.contact-icon-link { 
 
\t width: 1em; 
 
\t margin: 0 auto; 
 
\t text-align: center; 
 
\t background-color: #3d7ddd; 
 
\t color: #94b7ec; 
 
\t border-radius: 150px; 
 
\t font-size: 5em; 
 
}

<section id="porfolio"> 
 
\t <div class="portfolio-header"> 
 
\t \t <p>Some of my recent work</p> 
 
\t </div> 
 
\t <div class="portfolio-container"> 
 
\t \t <ul> 
 
\t \t \t <li><img class="portfolio-image" src="images/ZIC-screenshot.png" alt="ZIC Homepage"><p>ZIC Homepage</p></li> 
 
\t \t \t <li><img class="portfolio-image" src="images/grafi-screenshot.jpg" alt="Javascript Interactive Graphs"><p>Interactive Js Graphs</p></li> 
 
\t \t </ul> 
 
\t </div> 
 
</section> 
 

 
<footer> 
 
\t <div id="contact"> 
 
\t \t <div class="contact-icon-box"> 
 
\t \t \t <div class="contact-icon-link ion-social-facebook"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="contact-icon-box"> 
 
\t \t \t <div class="contact-icon-link ion-ios-telephone"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="contact-icon-box"> 
 
\t \t \t <div class="contact-icon-link ion-email"> 
 
\t \t \t </div> \t \t \t \t 
 
\t \t </div> 
 
\t </div> \t 
 
</footer>

來源

2015-04-30 Miha Šušteršič

，爲什麼你會使其成爲一個片段，它不會不正確的圖像，自定義字體，normalize.css等上顯示... –

從我的理解保持高度：自動爲.portfolio容器，所以它不會重疊。希望它有幫助 – LegendaryAks

呃，忘了刪除舊的高度：100px的代碼。我越來越累，現在停下來好一點。把它寫成一個anwser，所以我可以接受它。謝謝 –

嘗試設置高度：自動對投資組合容器

.portfolio-container { 
    margin: 0 0 1.5em 0; 
    background-color: red; 
    height:auto; 
    background-color: #3d7ddd; 
}

來源

2015-04-30 14:40:24 LegendaryAks

首先，除去上.portfolio-container固定height。

然後，做一個明確的修復，因爲裏面有浮動元素。

.portfolio-container li:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

或者設置.portfolio-container li { overflow: auto; }

來源

2015-04-30 14:39:30 Stickers

這聽起來像裏面的內容你是因爲你有一個portfolio-container限制height是portfolio-container重疊頁腳。因此，內容無處可去，而是無處不在。

刪除height限制或嘗試使用min-height。

來源

2015-04-30 14:40:05

div不與內容重疊的內容拉伸

回答

相關問題