DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS控制文字在Div最底部顯示
CSS控制文字在Div最底部顯示
編輯:CSS詳解     
  • 以下技巧相信是比較實用的,讓一行文字始終顯示在某個Div的最底部,做前端開發,肯定什麼情況都要碰到,雖然這個不常用,不過也是會用到的。用到position:relative、position:absolute;屬性。text-align:center;這行是定義顯示在最底行的文字水平居中,可以不設置,但文字會靠左顯示。

    01 <!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN" 02 "http://www.w3.org/TR/Html4/loose.dtd"> 03 <Html> 04 <head> 05 <title>CSS控制文字顯示在Div底部</title> 06 <style type="text/CSS"> 07 #txt{ 08 height:300px; 09 width:300px; 10 border:1px solid #333333; 11 text-align:center; 12 position:relative 13 } 14 #txt p{ 15 position:absolute; 16 bottom:0px; 17 padding:0px; 18 margin:0px 19 } 20 </style> 21 </head> 22 <body> 23 <div id=txt> 24 <p>這行文字會始終顯示在方框的底部</p> 25 </div> 26 </body> 27 </Html>

    本代碼適用Div高度固定,也就是定義了高度的情況下,其實不定義高度的時候,它也是顯示在最底部,因為沒有高度的情況下,Div會自動適應容器內的內容。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved