• 技术文章 >web前端 >html教程

    html怎么设置文字向下

    藏色散人藏色散人2021-02-25 11:28:40原创6173

    html设置文字向下的方法:首先创建一个HTML示例文件;然后在body中定义一段文字内容;接着在父元素中设置css属性“position:relative”;最后在存放文字的子元素中设置css属性为“boottom:0”即可。

    本文操作环境:Windows7系统、HTML5&&CSS3、Dell G3电脑

    1、如果是文字或者其他块级元素。使用定位的思想。position:absolute,然后boottom:0。父元素要设置为position:relative。

    因为绝对定位是相对于最近一个非static定位的元素的相对位置。 但是如果出现多个元素在同一父元素内 同时需要绝对定位移动位置,那么需要注意,如果直接这样做,会造成那些元素重叠,而不是与float一样的正常排布。

    这是因为他们有相同的父元素,使用绝对定位之后就都会移动到父元素的左边,而不是还处在原来的位置。

    为了解决这种情况,需要给那些需要移动位置的元素 嵌套一个父元素,让他们的父元素去定位,给他们的父元素设置relative,这样原先的父元素就变成了爷元素。

    这样一来,再给他们设置完绝对定位加位置属性之后就不会出现重叠的效果,因为他们都是在父元素的限度内去移动,再跑也跑不出来。这样就又不重叠,又能贴近底部,但是需要注意。

    新嵌套的父元素需要一个固定的高度,高度要高于内部元素。不然他的高度就是被内部元素撑开的。

    【推荐:HTML视频教程

    示例:

    <!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>无标题文档</title>
    <style type="text/css">
    #txt{ 
     
     height:300px;
     width:300px;
     border:1px solid #333333;
     text-align:center;
     position:relative 
     
    }
    #txt p{
     position:absolute;
     bottom:0px;
     padding:0px;
     margin:0px
    }
    </style>
    </head> 
     
    <body>
    <div id=txt>
    <p>文字靠下</p>
    </div>
    </body>
    </html>

    效果图:

    7101dd62bfb38afd5d98a5b60842d4e.png

    2、如果是文字(块级元素没试过,到时候可以试一下)。那么需要给包着文字的那个div设置成 display:table-cell+ vertical:bottom。这样文字就贴着div底部了。

    示例:

    HTML:

    <div>文字在div的底部对齐</div>

    css样式:

    div{
        width:200px;height:50px;  /*设置div的大小*/
        border:4px solid #beceeb; /*为了便于观察,显示出边框*/
        display:table-cell; 
        vertical-align:bottom;
        }

    效果图:

    a2a1e886f4eac1bd2bb58599bd5b882.png

    以上就是html怎么设置文字向下的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html
    上一篇:html如何让字体自动变色 下一篇:html中怎么加img路径
    PHP编程就业班

    相关文章推荐

    • php怎么清除html代码• html引入js不生效怎么办• html怎么把默认样式去掉• html如何让字体自动变色• html的label是什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网