CSS文字沉到元素的底部
在實際應用中可能有這樣的需求,那就是將指定的文字沉降到元素的底部。
下面就通過程式碼例項介紹以下如何實現此效果。
程式碼如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!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元素。
相關文章
- css讓文字位於div的底部CSS
- CSS如何讓文字居於div的底部CSS
- css將元素固定於網頁底部CSS網頁
- css 如何把元素固定在容器底部?(四種方式)CSS
- CSS 文字li元素中垂直居中CSS
- css多行文字底部虛線效果程式碼例項CSS
- JavaScript判斷元素底部到達瀏覽器客戶區的低端JavaScript瀏覽器
- 元素滾到到底部原理
- CSS元素(文字、圖片)水平垂直居中方法CSS
- CSS去掉圖片底部的空白CSS
- css li元素中的文字超出隱藏不換行效果CSS
- 元素在div中底部顯示
- CSS 設定元素第一行文字樣式CSS
- css文字在元素中垂直居中程式碼例項CSS
- getScrollHeight到達底部
- CSS的偽元素CSS
- css如何設定文字在li元素中垂直居中顯示CSS
- css如何實現文字在li元素中上下垂直居中CSS
- css實現盒尺寸重置、均勻分佈的子元素、截斷文字CSS
- css刪除超連結底部的橫線CSS
- CSS從入門到精通——文字與字型樣式CSS
- CSS的塊級元素和行內元素CSS
- css fixed視窗底部固定定位CSS
- html/css 滾動到元素位置,顯示載入動畫HTMLCSS動畫
- CSS——CSS 給文字加樣式:② 文字屬性CSS
- 笑談CSS的偽元素CSS
- CSS 文字居中CSS
- CSS文字排版CSS
- Sticky footers,元素一直在頁面底部
- HTML+CSS底部footer兩種固定方式HTMLCSS
- CSS+DIV讓頁尾始終底部CSS
- CSS系列:CSS文字樣式CSS
- css匹配指定元素的子元素程式碼例項CSS
- CSS 直接子元素CSS
- CSS塊狀元素和內聯元素CSS
- css設定span元素的尺寸CSS
- css匹配指定索引的li元素CSS索引
- HTML 文字格式化元素HTML