html - 这如何产生不等高的 div？

Question

demo [火狐 & IE]

HTML:

<div class="content">
  <div class="img">
    <div class="divs">
      <img src="path.jpg" alt="" />
    </div>
    <div class="divs">
      <img src="path.jpg" alt="" />
    </div>
    <div class="divs">
      <img src="path.jpg" alt="" />
    </div>
    <div class="divs">
      <img src="path.jpg" alt="" />
    </div>
  </div>    
</div>

CSS:

html, body {
    height: 100%;
}

.content {
    /* height: 100%; */
    position: relative;
    width: 100%;
}

.img {
    height: 100%;
    margin-left: 0.5%;
    max-width: 100%;
    width: 100%;
}
.content .divs {
    border: 1px solid #b64024;
    float: left;
    height: 25.5%;
    margin: 1% 0.5% 0;
    overflow: hidden;
    width: 20%;
}
.content .divs img {
    height: 100%;
    width: 100%;
}

如果您取消注释 .content 中的 height: 100%;，那么您会看到带有图像的等高 div。

所以，我的问题是:

如何在没有父 div 高度的情况下计算 .divs 的高度 .img -> .content 在继承 div 的百分比计算中？

Answer 1

简而言之，这是您的问题:

演示:http://jsfiddle.net/a75ekc0e/9/

.content {
    height:400px;
    position:relative;
}

.content div {
    float:left;
    background:yellow; border:1px solid blue;
    width:20%; height:25%;
    margin:1em;
}

该简化的演示显示内容“有效”。关键部分是:

• 您的 div 具有百分比高度。
• div 的“包含 block ”具有明确的高度。
  • super 重要:请注意，position:relative 导致 .content 成为其子项的“包含”；如果没有这个声明，它将是用于定位的主体。
• …因此，div 可以根据它们的位置计算它们的高度。

如果您从 .content 中删除 height，则该元素没有明确的高度，其高度取自其内容。当您使用上面的演示执行此操作并运行它时，您会看到 div 折叠成完全没有高度，因为它们无法计算稍后将确定的某些内容的百分比。

在您的演示中，它们从高度不同的图像内容中获取高度，这会导致它们发生变化。 height:25.5% 被完全忽略，因为父级没有明确的高度。

根据 specification of the CSS height属性:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

有关详细信息，请阅读本节 "Calculating Heights and Margins" 在 CSS 规范中。