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