父 div“ block ”有一个position:relative。它不会自动扩展以假定其子项总高度的高度,而是仅占用第一个子项的高度。您能解释一下为什么会发生这种情况以及如何应对吗?
.grid {
position: relative;
z-index: 1;
float: left;
margin: 3px;
}
.grid a {
text-decoration: none;
}
.grid .p7 {
width: 240px;
height: 300px;
border: 1px solid crimson;
}
.blocks {
position: relative;
}
.blocks .heading a {
text-decoration: none;
}
.blocks .heading a h3 {
text-transform: uppercase;
font-size: 28px;
font-family: "Rokkitt";
font-weight: 700;
padding: 0 3px;
line-height: 26px;
color: #222;
text-align: center;
}
.blocks .heading a p {
font-size: 16px;
font-family: "Rokkitt";
font-weight: 400;
padding: 5px 3px 10px;
color: #333;
text-align: center;
}
<div class="blocks">
<div class="heading">
<a href="">
<h3>Featured Deals</h3>
<p>Hand selected by our creative director</p>
</a>
</div>
<div class="grid">
<a href="details.html">
<div class="grid p7"></div>
</a>
<a href="details.html">
<div class="grid p7"></div>
</a>
<a href="details.html">
<div class="grid p7"></div>
</a>
<a href="details.html">
<div class="grid p7"></div>
</a>
<a href="details.html">
<div class="grid p7"></div>
</a>
<a href="details.html">
<div class="grid p7"></div>
</a>
<a href="details.html">
<div class="grid p7"></div>
</a>
<a href="details.html">
<div class="grid p7"></div>
</a>
</div>
</div>
最佳答案
您需要清除 .grid
div 上的 float ,否则该 div 的高度将不计入边距。
一种方法是使用overflow:hidden
但还有其他方法,详见HERE
.grid {
position: relative;
z-index: 1;
float: left;
margin: 3px;
}
.grid a {
text-decoration: none;
}
.grid .p7 {
width: 240px;
height: 300px;
border: 1px solid crimson;
}
.blocks {
position: relative;
background: #bada55;
overflow: hidden;
/* here */
}
.blocks .heading a {
text-decoration: none;
}
.blocks .heading a h3 {
text-transform: uppercase;
font-size: 28px;
font-family: "Rokkitt";
font-weight: 700;
padding: 0 3px;
line-height: 26px;
color: #222;
text-align: center;
}
.blocks .heading a p {
font-size: 16px;
font-family: "Rokkitt";
font-weight: 400;
padding: 5px 3px 10px;
color: #333;
text-align: center;
}
<div class="blocks">
<div class="heading">
<a href="">
<h3>Featured Deals</h3>
<p>Hand selected by our creative director</p>
</a>
</div>
<div class="grid">
<a href="details.html">
<div class="grid p7"></div>
</a>
<a href="details.html">
<div class="grid p7"></div>
</a>
<a href="details.html">
<div class="grid p7"></div>
</a>
<a href="details.html">
<div class="grid p7"></div>
</a>
<a href="details.html">
<div class="grid p7"></div>
</a>
<a href="details.html">
<div class="grid p7"></div>
</a>
<a href="details.html">
<div class="grid p7"></div>
</a>
<a href="details.html">
<div class="grid p7"></div>
</a>
</div>
</div>
关于html - 父 div 采用第一个子元素的高度而不是所有子元素高度的总和,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27604409/