看似简单的任务,但我就是想不通。我的页脚内有多个 span,我希望它们与底部对齐。
我试过添加 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%;
}
编辑
我不够清楚。我希望页脚内的跨度与底部对齐。这就是我现在拥有的:
这就是我想要的:
最佳答案
根据您的评论“无边距,无填充”,我看到的唯一方法是将您的跨度包装到一个 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;
}
关于html - 将多个跨度与页脚底部对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21666482/