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/

所以我想要max-height类的main-div，将作为img-responsive height

<p>的{{1}}将是div class="content "样式

我的问题是我不知道如何在任何给定时间获得overflow: hidden的高度

我的目标也是按钮始终位于底部，与img

平行

Answer 1

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

在bootstrap中，如何强制div的高度作为高度img-responsive类

1 个答案: