css如何實現讓文字沉到元素的底部

来源:http://www.cnblogs.com/nulifendou/archive/2016/01/28/5167243.html
-Advertisement-
Play Games

css如何實現讓文字沉到元素的底部:在實際應用中可能有這樣的需求,那就是將指定的文本沉降到元素的底部。下麵就通過代碼實例介紹以下如何實現此效果。代碼如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author


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/


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 效果體驗:http://hovertree.com/texiao/jquery/26/本效果適用於移動設備,可以使用手機等瀏覽效果。代碼下載:http://hovertree.com/h/bjaf/e14uccpw.htmHTML代碼如下: 1 <!doctype html> 2 <html lan
  • 對CSS盒子模型的理解,以及闡述了margin、border、padding、content的作用和在標準模式與怪異模式的區別。
  • 1、AJAX 簡介 AJAX(音譯為:阿賈克斯) = Asynchronous JavaScript and XML(非同步的 JavaScript 和 XML),是指一種創建互動式網頁應用的網頁開發技術,也就是在無需重新載入整個網頁的情況下,能夠更新部分網頁的技術。AJAX 不是新的編程語言,而是一
  • 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <ti
  • 前言 昨天博客接入了評論系統,使用的是國內的多說。 之前看到過有些利用該評論系統的有瀏覽器和系統信息的顯示,感覺很不錯。 所以,也想有這樣的效果。 問題 多說如何顯示瀏覽器和系統的信息? 解決方法 經過查找,利用UAParser.js可以實現。 步驟 1. 添加樣式 1 span.this_ua {
  • 對HTML5以下描述中錯誤的是() 以下關於video元素描述錯誤的是() 若要在網頁中插入樣式表style.css,以下用法中,正確的是( )。 以下可以在html頁面中顯示“<”的是( )。 A. It;B. &Lt;C. &ItD. < 請使用HTML解碼工具:http://tool.hove
  • 點擊enter回車鍵實現表單元素切換焦點效果:現在網站都比較追求人性化,比如填寫表單的時候,能夠實現點擊回車就可以切換表單元素的焦點,這樣比使用滑鼠進行切換更能讓人接受,下麵就通過代碼實例介紹一下如何實現此功能。代碼如下: <!DOCTYPE html> <html> <head> <meta ch
  • javascript截取字元串代碼實例:截取字元串是常見的操作,例如新聞列表對新聞標題長度的控制就是如此,下麵分享一段這樣的代碼實例,也不多做介紹了,因為代碼很簡單,很多朋友需要的僅僅是一個例子而已,因為只要看到例子就知道該怎麼用了。代碼如下: var str="螞蟻部落歡迎您,只有努力才會有美好的
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...