通过CSS控制文字在Div最底部显示

作者:CSS教程吧      点击次数:664次     发布日期:2015-12-02

通过CSS控制文字在Div最底部显示

  • 以下技巧相信是比较实用的,让一行文字始终显示在某个Div的最底部,做前端开发,肯定什么情况都要碰到,虽然这个不常用,不过也是会用到的。用到position:relative、position:absolute;属性。text-align:center;这行是定义显示在最底行的文字水平居中,可以不设置,但文字会靠左显示。

    01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    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会自动适应容器内的内容。

分享DIVCSS8