0

基本的に、画像の中にタイトルがあります。以下のコードと例からわかるように、負の margin-top を設定して、画像内の下部近くに配置しました。問題は、テキストの位置/向きが上から下にあることです。つまり、タイトルのテキストが多いほど、下部に向かって長くなります。私はそれを逆にしたい - テキスト 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;       
}
4

4 に答える 4

2

ここにあなたが探しているものがあり.image position:relativeます.title bottom:0; 。

<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-25T22:05:49.113 に答える