html - 元素之间自动增长div

Question

如何使 div 的最大尺寸增大到底部。并在到达底部的绝对定位 div 时停止。我现在有这个:

div {
  position: relative;
  display: block;
  border: 1px solid black;
}
.wrap {
  clear: both;
  width: 60%;
  display: block;
  heigth: 150px;
}
.img {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 15px;
}
.right {
  height: 150px;
  overflow: hidden;
}
.details {
  position: absolute;
  bottom: 0;
}
.title {
    display: block;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<div class="wrap">
  <div class="img">
    img
  </div>
  <div class="right">
    <div class="hover">
      <div class="title">
        <h5>lots of text</h5>
      </div>
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    <div class="details">
      <span>some link and detail</span>
    </div>
  </div>
</div>
<div class="wrap">
  <div class="img">
  img
  </div>
  <div class="right">
    <div class="hover">
      <div class="title">
        <h5>litle text</h5>
      </div>
      <div class="text">
        lorum ipsum
      </div>
    </div>
    <div class="details">
      <span>some link and detail</span>
    </div>
  </div>
</div>
<div class="wrap">
  <div class="img">
  img
  </div>
  <div class="right">
    <div class="hover">
      <div class="title">
        <h5>Very long title that does not fit on one line with all these words and so on on on on on</h5>
      </div>
      <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
    <div class="details">
      <span>some link and detail</span>
    </div>
  </div>
</div>
<div class="wrap">
  <div class="img">
  img
  </div>
  <div class="right">
    <div class="hover">
      <div class="title">
        <h5>large detail text</h5>
      </div>
      <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
    <div class="details">
      <span>allot of details that don't fit on one line and so on on on on on on on on</span>
    </div>
  </div>
</div>

我希望 .text 的高度最大，而 .title 和 .detail 的高度可以根据内容动态变化。

Answer 1

您是否尝试过使用 Materialize CSS 进行此设计？您想要设计部分的方式类似于 "cards" . stackoverflow 上的这个答案包含我的示例中的原始代码，https://stackoverflow.com/a/32271807/5914723

Example jsFiddle

HTML

卡标题

我是一张很简单的卡片。我擅长包含少量信息。我很方便，因为我需要很少的标记才能有效使用。

这是一个链接

<hr>

CSS

.card-image {
  float: left;
  width: 40%;
  height: 150px;
}

.card-image img {
  height: 100%;
}

.right-content {
  width: 60%;
  float: left;
  height: 250px;
}

.card-title {
  padding-left: 20px;
  height: 10%;
}

.card-action {
  height: 10%;
}

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
 }