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让文字底部对齐的方法
