0

基本上我在图像中有一个标题。正如您从下面的代码和示例中注意到的那样，我设置了一个负边距顶部以将其定位在图像内部靠近底部的位置。问题是文本位置/方向是从上到下的。这意味着标题的文本越多，越长，越靠近底部。我想让它反转 - 以便文本 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 回答
1

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

于 2013-07-25T22:01:28.333 回答
1

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

看看这个小提琴。

还添加了悬停以查看标题。

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-26T01:40:42.503 回答
0

是vertical-align你要找的吗？

于 2013-07-25T22:00:28.763 回答