Question

我有一个名为portfolio-container的div，其中包含一个列表，其中包含2个图像，每个图像下面都有一个段落。问题是他没有垂直拉伸，所以我的图片和段落现在与我的页脚重叠。我已经尝试将display: inline-block设置为section元素，容器div，列表元素和图像，但到目前为止还没有任何效果。

＆＃13;

/********************************************
PORTFOLIO
********************************************/

#portfolio {
	display: inline-block;
}

.portfolio-header {
	background-color: #0e2951;
	color: #fff;
	margin: 1em 0 0 0;
	font-size: 1.5em;
	padding: 0.1em 0.5em;
}

.portfolio-header.p {
	margin: 0;
}

.portfolio-container {
	margin: 0 0 1.5em 0;
	background-color: red;
	height:100px;
	background-color: #3d7ddd;
}

.portfolio-container ul {
	margin: 0;
	list-style: none;
	padding: 0;
}

.portfolio-container li {
	width: 80%;
	margin: 0 auto;

}

.portfolio-container li p {
	margin: 0 0 1em 0;
	background-color: #b1caf1;
}

.portfolio-image {
	max-width: 100%;
	margin: 0;
	float: left;
}


/********************************************
FOOTER
********************************************/

footer {
	border-bottom: solid 0.5em #0e2951;
	background-color: #000000;
}

.contact-icon-box {
	width: 33.333%;
	float: left;
	margin-top: 1.5em;
}
.contact-icon-link {
	width: 1em;
	margin: 0 auto;
	text-align: center;
	background-color: #3d7ddd;
	color: #94b7ec;
	border-radius: 150px;
	font-size: 5em;
}

＆＃13;

<section id="porfolio">
	<div class="portfolio-header">
		<p>Some of my recent work</p>
	</div>
	<div class="portfolio-container">
		<ul>
			<li><img class="portfolio-image" src="images/ZIC-screenshot.png" alt="ZIC Homepage"><p>ZIC Homepage</p></li>
			<li><img class="portfolio-image" src="images/grafi-screenshot.jpg" alt="Javascript Interactive Graphs"><p>Interactive Js Graphs</p></li>
		</ul>
	</div>
</section>

<footer>
	<div id="contact">
		<div class="contact-icon-box">
			<div class="contact-icon-link ion-social-facebook">
			</div>
		</div>
		<div class="contact-icon-box">
			<div class="contact-icon-link ion-ios-telephone">
			</div>
		</div>
		<div class="contact-icon-box">
			<div class="contact-icon-link ion-email">
			</div>				
		</div>
	</div>	
</footer>

＆＃13;

Answer 1

听起来您portfolio-container内的内容与页脚重叠，因为您对height有portfolio-container限制。因此，内容无处可去，但却失败了。

删除height限制或尝试使用min-height。

Answer 2

尝试设置高度：auto for portfolio-container

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

div不与内容重叠的内容拉伸

2 个答案: