0

您能否看看JSfiddle并让我知道如何.caption将 div 与 class 放在 div 的底部.wrapper

我已经尝试向其中添加position:absolute; bottom:5px;规则,.caption但它将标题 div 置于.wrapper!

<div class="wrapper">
 <div class="caption">Test</div>
 <div class="main"></div>
</div>

这是CSS规则

.wrapper{
height:300px;
width:300px;
background-color:yellow;
}
.main{
height:100%;
width:100%;
}
.caption{
height:10%;
width:100%;
background: rgb(0, 0, 0) ; opacity: 0.7;>
margin-bottom:5px;
color:white;
}
4

3 回答 3

2

应该可以工作,position: absolute但您需要设置.wrapper为:

.wrapper {
   position: relative;
}

在这里演示:http: //jsfiddle.net/sBxP2/4/

于 2013-08-07T05:15:52.567 回答
0

尝试这个

http://jsfiddle.net/shall1987/MwJsG/

CSS

.wrapper{
    height:300px;
    width:300px;
    background-color:yellow;
    position: relative;
}
.main{
    height:100%;
    width:100%;

}
.caption{
    height:10%;
    width:100%;
   background: rgb(0, 0, 0) ; opacity: 0.7;>
    margin-bottom:5px;
    color:white;
    position: absolute;    
    bottom: 0;
}
于 2013-08-07T05:21:49.993 回答
0

你可以像这样更新你的CSS http://jsfiddle.net/shall1987/MwJsG/

.wrapper{
    height:300px;
    width:300px;
    background-color:yellow;
    position:relative;
}
.main{
    height:100%;
    width:100%;

}
.caption{
    height:10%;
    width:100%;
   background: rgb(0, 0, 0) ; opacity: 0.7;
    margin-bottom:5px;
    color:white;
    position:absolute;
    bottom:0;
}
于 2013-08-07T05:23:36.757 回答