CSS 文字坚排与底部对齐

作者: mindevil 分类: CSS 发布时间: 2010-11-24 17:01 ė 6没有评论

嘿嘿……今天在写那个点评时遇到一个问题,偶的大陆CSS搞不定了,只能向他们高级的求救“文字坚排与底部对齐”,最后得到的解决方案如下,哈哈……好东西不忘与大家分享哈,下面就图文并茂的解说一下

html代码是:

<ul>
<li><span class="vidio01">很不错的哦</span></li>
<li><span class="vidio02">菜品不错</span></li>
<li><span class="vidio03">菜品不错</span></li>
</ul>

CSS代码如下:

.vidio_guan{width:585px; height:110px; margin:10px auto;}
.vidio_guan li {
   position:relative;width:24px; height: 110px; margin-right: 10px; float: left 
}

.vidio_guan li span {
    padding: 4px;  line-height: 16px; width: 16px;
    position: absolute; bottom: 0px; text-indent: 0px; 
    display: block; height: auto;text-align:center;
}
.vidio01{ background:#fbe2aa;}
.vidio02{ background:#fbafdd9;}
.vidio03{ background:#ffe8sfd;}
.vidio04{ background:#fbe2aa;}
.vidio05{ background:#eddfc7;}
.vidio06{ background:#bee8fe;}

本文出自 肥蕉博客@IT技术,热门话题,生活随笔,美图欣赏,转载时请注明出处及相应链接。

本文永久链接: http://www.bananawolf.com/html/2010/11/186.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

Ɣ回顶部