標籤：style http io color ar os 使用 sp strong
css對文字的布局上沒有靠容器底部對齊的參數，不過我們可以使用position的相對和絕對位置功能輕鬆實現文字靠近div底部對齊，並且靠近的距離可以調節，精確到像素，在網上搜集到三段代碼如下。由www.169it.com 搜集整理
代碼1:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS實現文字底部對齊</title>
<style type="text/css">
#txt{
height:300px;
width:300px;
border:1px solid #333333;
position:relative
}
#txt p{
position:absolute;
bottom:0px;
padding:0px;
margin:0px
}
</style>
</head>
<body>
<div id="txt">
<p><a href="http://www.169it.com" target="_blank">最新IT科技資訊</a></p>
</div>
</body>
</html>
|
代碼2:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>
body{font-size:12px;}
.div{width:500px;height:200px;border:1px solid #333;background:#ccc;}
.div2{
height:20%;
width:300px;
margin:0 auto;
background:#eee;
bottom: 0px;
position: relative;
text-align: center;
}
.div3{height:80%;}
</style>
</head>
<body>
<div class="div">
<div class="div3"></div>
<div class="div2">
看看是不是你想要得效果<br/>
不這樣的話用table是比較方便達到你要求的效果
</div>
</div>
</body>
</html>
|
代碼3:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 |
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS實現文字底部對齊</title>
<style type="text/css">
#txt{
height:246px;
width:512px;
border:1px solid #000000;
position:relative
}
#txt span{
position:absolute;
bottom:10px;
padding:0px;
margin:0px
}
</style>
</head>
<body>
<div id="txt">
<span><a href="#" target="_blank">169IT科技資訊</a></span>
</div>
</body>
</html>
|
以上代碼僅供參考。
文章來源:在div中使用css讓文字底部對齊的方法
在div中使用css讓文字底部對齊的方法
