Question

如何使div增长最大尺寸到底部。当它到达底部的绝对位置div时停止。我现在有这个：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

我希望.text增加最大高度，而.title和.detail因内容而在高度上可以是动态的。

Answer 1

您是否尝试过将Materialise 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;
 }

自动生成div与元素之间

1 个答案: