将多个跨度对齐到页脚底部

Question

看起来像一个简单的任务，但我无法弄明白。我的页脚里面有几个跨度，我希望它们与底部对齐。

我尝试添加vertical-align:bottom和bottom:0，但没有运气。

<footer>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</footer>

重要它们是spans！

以下是css和here's a fiddle。

footer {
    width:100%;
    height:30px;
    background-color:#555;
}
span {
    border-left:1px solid #DDD;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:50%;
    display:block;
    float:left;
    width:25%;
}

修改
我不太清楚。我希望页脚内的跨度与底部对齐。这就是我现在所拥有的：

这就是我想要的：

Answer 1

基于你的评论“没有边距，没有填充”，我看到的唯一方法是将你的跨度包装成div并根据需要定位div。

<强> HTML

<footer>
    <div>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
    </div>
</footer>

<强> CSS

footer {
    width:100%;
    height:30px;
    background-color:#555;
    position: relative;
}
div{
    position: absolute;
    bottom: 0;
    height:50%;
    width: 100%;
}
span {
    border-left:1px solid #DDD;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
    display:block;
    float:left;
    width:25%;
    background-color:#777;
 }

<强> Fiddle

Answer 2

如果我已正确理解你的问题，那么这就是小提琴：

Working Example

footer {
width:100%;
height:30px;
background-color:#555;
bottom:0px;
position:absolute;
}
span {

border-left:1px solid #DDD;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:50%;
display:block;
float:left;
width:25%;
}

希望这有帮助。

Answer 3

这就是你需要的

DEMO

footer {
    width:100%;
    height:30px;
    background-color:#555;
    position:absolute;

}
span {
    border-left:1px solid #DDD;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:20px;
    display:block;
    float:left;
    width:25%;
    background-color:#777;
    position:relative;
    margin-top:10px;

}