Question

在此处查看示例。 http://jsfiddle.net/y638o46h/1/（查看最后一张图片）

我正在尝试在图像上添加文本，但是如果行数超过包含div的高度，则文本会溢出。但是有一种方法可以根据数量调整div的大小。线。

<div class="relatedposts">
  <div class="relatedthumb">
     <img src="img1" >
        <h3 class="justin-cover">Lets make this work</h3>
  </div>
  <div class="relatedthumb">
     <img src="img2" >
         <h3 class="justin-cover">Lets make this work</h3>
  </div>
</div>


 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   }
  .relatedposts {
  display:table; 
  width:1024px;font-size: 0;
  /* fix inline gap */
  margin: 0 auto;
  }
  .relatedthumb {
  float: left;
  margin-left:5px;
  position: relative;
  margin-bottom:10px;
  }
 .relatedthumb img {
  text-align:center;
  }
 .justin-cover {
 color: #fff;
 font-size: 30px;
 font-weight: 500;
 height: 30%;
 width: 100%;
 position: absolute;
 bottom: 0;
 left:0;
 background: rgba(0,0,0,0.5);
 padding: 10px;
 transition: all 0.5s;
 }

Answer 1

更改此

.justin-cover {
    ...
    height: 30%;
    ...
}

到此

.justin-cover {
    ...
    min-height: 30%;
    max-height: 100%; // Add this one too
    ...
}

Answer 2

如果可以接受，可以设置溢出属性。溢出：汽车;

调整包含文本的div的大小

2 个答案: