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不与内容重叠的内容拉伸

回答

相关问题