調整包含文本的div的大小

查看此處的示例。 http://jsfiddle.net/y638o46h/1/（看最後一張圖片）調整包含文本的div的大小

我想在圖片上添加文字，但用我的方法如果行數超過了包含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; 
}

來源

2014-10-10 WutWut

如果您刪除'.justin-cover {height：30％; }'它可以像你需要的一樣工作：http://jsfiddle.net/y638o46h/2/ – emmanuel 2014-10-10 16:46:57

改變高度爲自動打開.justin-cover – 2014-10-10 16:48:28

更改此

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

對此

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

來源

2014-10-10 16:50:25

如果它是可以接受的，你可以設置overflow屬性。溢出：auto;

來源

2014-10-10 18:08:10

調整包含文本的div的大小

回答

相關問題