以下技巧相信是比較實用的,讓一行文字始終顯示在某個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會自動適應容器內的內容。