來自底部的文本位置

基本上我在圖像中有一個標題。您可以從下面的代碼和示例中注意到，我已經設置了一個負邊距頂部，將其放置在圖像中靠近底部的位置。問題是文本的位置/方向是從上到下。這意味着標題越多，文字越長，到底部。我想讓它反轉 - 以便文本div根據其大小將文本擴展到頂部。來自底部的文本位置

可能嗎？先謝謝你。

這裏是例子http://jsfiddle.net/j7gLd/

HTML

<div class="image"> 
    <img src="image.jpg"> 
    <div class="title">This is a title</div>  
</div> 
<div class="image"> 
    <img src="image.jpg"> 
    <div class="title">This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title</div>  
</div>

CSS

.image { 
    width: 800px; 
    height: 530px; 
    margin: 10px; 
} 
.title { 
    position: absolute; 
    background-color: #CCC; 
    max-width: 600px; 
    margin-top: -80px; 
    padding: 5px;  
}

來源

2013-07-25 coldpumpkin

這裏是你在找什麼，給.image position:relative和.title bottom:0;fiddle

<div class="image"> 
    <img src="http://s23.postimg.org/g033nno17/image.jpg"/> 
    <div class="title">This is a title Maurizzle pellentesque nibh black turpizzle. Doggy izzle tortizzle. Pellentesque eleifend rhoncus crunk. In hac habitasse funky fresh dictumst. Donec dapibizzle. Curabitizzle tellizzle fo shizzle my nizzle, pretizzle own yo', that's the shizzle away, shizznit vitae, nunc. Stuff suscipit. Dawg sempizzle velit sizzle pizzle.</div>  
</div> 
<div class="image" style="background:red;"> 
    <img src="http://s23.postimg.org/g033nno17/image.jpg"/> 
    <div class="title">This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a titl Lorizzle ipsizzle dolor crunk amizzle, consectetizzle adipiscing get down get down. Mofo dawg velizzle, shiz volutpat, suscipit quis, gravida vel, pimpin'. Pellentesque eget tortor. Sed erizzle. Dope at dapibizzle away tempus shiz. Maurizzle pellentesque nibh black turpizzle. Doggy izzle tortizzle. Pellentesque eleifend rhoncus crunk. In hac habitasse funky fresh dictumst. Donec dapibizzle. Curabitizzle tellizzle fo shizzle my nizzle, pretizzle own yo', that's the shizzle away, shizznit vitae, nunc. Stuff suscipit. Dawg sempizzle velit sizzle pizzle.e</div>  
</div> 

.image { 
    width: 820px; 
    height: 530px; 
    margin: 10px; 
    position:relative; 
} 
.title { 
    position: absolute; 
    display:block; 
    background-color: #CCC; 
    padding: 5px; 
    bottom:0; 
    width:790px; 
    vertical-align:bottom; 
}

來源

2013-07-25 22:05:49 feitla

是vertical-align你在找什麼？

來源

2013-07-25 22:00:28

將標題設置爲position：absolute; bottom：0;

來源

2013-07-25 22:01:28 Vector

改變圖像的位置是：相對於爲好。 – KnowHowSolutions

可能我建議你不同的東西？

看一看這個fiddle。

還添加懸停看標題。

HTML

<div class="image" style="background-image: url('http://placekitten.com/200/150');"> 
    <div class="footerBar">Small Title</div> 
</div> 

<div class="image" style="background-image: url('http://placekitten.com/200/150');"> 
    <div class="footerBar">Very Very Very Very Very Very Very Very Very Very Very Very Very Long Title</div> 
</div>

CSS

.image { 
    width: 200px; 
    height: 150px; 
    position: relative; 
} 
.footerBar { 
    background-color: lightGrey; 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    overflow: none; 
    display: none; 
    word-wrap:break-word; 
} 
.image:hover .footerBar { 
    display: block; 
}

來源

2013-07-26 01:40:42 Thanos

來自底部的文本位置

回答

相關問題