css - 如何使 float 的 img 与其父级具有相同的高度？

Question

我有一个页脚 div，其中包含一些版权文本和一个小 Logo 。我想将 Logo 高度设置为与包含它的 div 相同的高度。

明显的解决方案是height: 100%，但这似乎只是让图片显示在其正常高度。

相关html:

<footer>
  <img src="images/circle_logo.png" alt="GriffMUN 2014" title="GriffMUN 2014">
  <p>Details here</p><p>More details here.</p>
</footer>

相关CSS:

footer {
  color: #ffffff;
  padding: 10px 10px 10px 10px;
  text-align: right;
  margin: 0 auto;
  background-color: #000000;
  font-size: small;
  float: center;
}

footer img {
  float:right;
  height:100%;
}

Answer 1

在里面的绝对位置添加一个div来容纳img

<footer>
     <p>Details here</p><p>More details here.</p>
     <div class="new_class"><img src="images/circle_logo.png" alt="GriffMUN 2014" title="GriffMUN 2014"></div>
    </footer>

CSS

footer {
  color: #ffffff;
  padding: 10px 10px 10px 10px;
  text-align: right;
  margin: 0 auto;
  background-color: #000000;
  font-size: small;
  float: center;
  position:relative;
}

footer img {
  float:right;
  height:100%;
}
.new_class {
    position:absolute;
    right:50px;
    top:0;
    height:100%;
    }

根据需要调整 div 位置以查看 <p>标签