Question

基本上我在图像中有一个标题。从下面的代码和示例中可以看出，我设置了一个负边距顶部，将其定位在图像内部，靠近底部。问题是文本位置/方向是从上到下。这意味着标题所包含的文本越多，它就会越长，就越低。我想反过来 - 所以文本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;       
}

Answer 1

以下是您要找的内容，请.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;
}

Answer 2

将标题设置为position：absolute; bottom：0;

Answer 3

我可以建议你一些不同的东西吗？

查看此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;
}

Answer 4

vertical-align您要找的是什么？

文字位置来自底部

4 个答案: