Question

我正在尝试将我网站上的div定位到底部0px。请参阅下面的代码。这个位置为0px的div包含在另一个div中。

这是HTML

<div class="top-wrap">
    <div class="clearfix top-cleafix">
        <div class="test">
            Test
        </div>
    </div>
</div>

这是CSS

.clearfix{
    width: 960px;
    margin-left: auto;
    margin-right: auto; 
}

.top-wrap{
    height: 341px;
    background: #F00;
    width: 100%;    
}

.top-cleafix{
    height: 100%;
}

.test{
    bottom: 0px;    
}

Answer 1

尝试：

.test{
    position:absolute;
    bottom: 0px; 
    width:100%;   
}
.top-wrap{
    height: 341px;
    background: #F00;
    width: 100%;    
    position:relative; //add relative position
}

Fiddle here.

Answer 2

添加

   position:absolute;

或

   position:relative;

基于内容

Answer 3

使用

.test{
    float: bottom; 
vertical-align:bottom;

}

Answer 4

你需要在top-wrap中添加test和relative中的绝对位置



.top-wrap{
    position:relative;
    height: 341px;
    background: #ddd;
    width: 100%;    
}

.clearfix{
    width: 960px;
    margin-left: auto;
    margin-right: auto; 
}

.top-cleafix{
    height: 100%;
}

.test{
    bottom: 0px;  
    position: absolute;


}

Fiddle example

无法使用CSS将div定位到底部0px

4 个答案: