在引导程序中，如何将 div 的高度强制为高度 img 响应类

Question

我有一个如下所示的 div：

<div class="main-div col-xs-12 col-md-6">
  <div class="col-xs-6">
    <a href="">
      <img class="img-responsive" src="https://placehold.it/285x251">
    </a>
  </div>

  <div class="content col-xs-6">  
    <h4>Header</h4>
    <p>Paragraph test</p>

    <div class="buttons">
      <div class="btn btn-primary col-md-6">Add to cart</div>
      <div class="btn btn-success col-md-6">View Item</div>
    </div>
  </div>
</div>

我希望 img-responsive 类将确定主 div 的总高度

所以如果它看起来像这样： http://jsfiddle.net/y9Let9dh/

所以我希望 main-div 类的 max-height 将作为 img 响应高度

和<p> 的div class="content " 将是overflow: hidden 样式

我的问题是我不知道如何在任何给定时间获得img-responsive 的高度

我的目标也是，做 按钮始终在底部，与 img 平行

Answer 1

见JSFiddle。你是这样看的吗？ 您需要将overflow: hidden 设置为您的main-div，将您的内容包装到某个div（我称之为cont-inner）并将position: absolute 设置为他，因为绝对定位的元素并没有改变父母的高度。