html怎么设置文字向下

藏色散人
发布: 2023-01-03 09:25:34
原创
21022 人浏览过

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

html怎么设置文字向下

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

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

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

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

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

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

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

【推荐:HTML视频教程

示例:

    无标题文档  

文字靠下

登录后复制

效果图:

7101dd62bfb38afd5d98a5b60842d4e.png

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

示例:

HTML:

文字在div的底部对齐
登录后复制

css样式:

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

效果图:

a2a1e886f4eac1bd2bb58599bd5b882.png

以上是html怎么设置文字向下的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!