Heim >Web-Frontend >HTML-Tutorial >css如何实现让文字沉到元素的底部_html/css_WEB-ITnose
css如何实现让文字沉到元素的底部_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 11:27:582170Durchsuche
css如何实现让文字沉到元素的底部:
在实际应用中可能有这样的需求，那就是将指定的文本沉降到元素的底部。
下面就通过代码实例介绍以下如何实现此效果。
代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#box{ width:200px; height:100px; background:#CCC; position:relative;}#box span{ position:absolute; bottom:0px;}</style></head> <body><div id="box"> <span>蚂蚁部落</span></div></body></html> 上面的代码实现了我们的要求，原理也是比较简单的。
将文本放置于span元素之内，然后设置span元素为绝对定位，将其定于box元素底部即可。
box元素要要采用相对定位，这样span元素的定位参考对象才能够是box元素。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15954
更多内容可以参阅:http://www.softwhy.com/divcss/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：提高CSS文件可维护性的五种方法_html/css_WEB-ITnoseNächster Artikel：蒙板 模态对话框_html/css_WEB-ITnose