demo [Firefox＆amp; IE]

Question

demo [Firefox＆amp; 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%;
}

如果您从height: 100%;取消注释.content，那么您会在图片中看到相等的高度div。

所以，我的问题是：

在没有父.divs身高div - ＆gt;的情况下如何计算.img s'身高继承.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;
}

这个简化的演示显示了内容＆＃39;工作＆＃39;。关键部分是：

你的div有百分比高度。
＆＃39;包含块＆＃39; div的高度明确。
- 超级重要：请注意，position:relative会导致.content成为＆＃39;包含＆＃39;为了孩子;没有这个声明，它将是用于定位的主体。
...因此，div可以根据他们的位置来计算他们的身高。

如果从height中移除.content，则此元素没有明确的高度，其高度取自其内容。当您使用上面的演示并运行它时，您会看到div折叠为根本没有高度，因为它们无法计算稍后将确定的事物的百分比。

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

根据specification of the CSS height属性：

百分比是根据生成的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未完全定位，则该值将计算为＆＃39; auto＆＃39; 。< / p>

有关详情，请参阅CSS规范中的 "Calculating Heights and Margins" 部分。

Answer 2

这可能不是答案。

尽管经历了很多苦苦挣扎，但我发现这背后的key reason背后是原始大小不同的图像高度。

让我们看看原始图像尺寸相同的演示： demo

但是仍然对原始图像尺寸造成的图像高度行为感到惊讶，并且在不同的浏览器中也会有所不同。

这如何产生不相等的高度div？

demo [Firefox＆amp; IE]

HTML：

CSS：

2 个答案:

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