CSS The layout of the text is not on the bottom of the container alignment parameters, but we can use the relative and absolute positioning of the position text close to the bottom of the Div, and close to the distance can be adjusted, accurate to the pixel, the online collection of three pieces of code as follows. collected and collated by www.169it.com
Code Listing 1:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21st 22 23 24 25 26 27 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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>
<body>
<div id="txt">
<p><a href="http://www.169it.com" target="_blank"> 最新 IT 科技资讯 </a></p>
</div>
</body>
|
Code Listing 2:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21st 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">
xmlns="http://www.w3.org/1999/xhtml">
<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>
<body>
<div class="div">
<div class="div3"></div>
<div class="div2">
看看是不是你想要得效果 <br/>
不這樣的話用 table 是比較方便達到你要求的效果
</div>
</div>
</body>
|
Code Listing 3:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21st 22 23 24 25 |
<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>
<body>
<div id="txt">
<span><a href="#" target="_blank">169IT 科技资讯 </a></span>
</div>
</body>
|
The above code is for reference only.
Article source : How to use css to align text at the bottom of a div
How to use CSS to align text at the bottom of a div