这篇文章给大家分享的是有关html设置文字向下的方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。html设置文字向下的方法：首先创建一个HTML示例文件；然后在body中定义一段文字内容；接着在父元素中设置CS
这篇文章给大家分享的是有关html设置文字向下的方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
html设置文字向下的方法：首先创建一个HTML示例文件；然后在body中定义一段文字内容；接着在父元素中设置CSS属性“position:relative”；最后在存放文字的子元素中设置css属性为“boottom:0”即可。
如果是文字或者其他块级元素。使用定位的思想。position：absolute，然后boottom：0。父元素要设置为position：relative。
因为绝对定位是相对于最近一个非static定位的元素的相对位置。 但是如果出现多个元素在同一父元素内 同时需要绝对定位移动位置，那么需要注意，如果直接这样做，会造成那些元素重叠，而不是与float一样的正常排布。
这是因为他们有相同的父元素，使用绝对定位之后就都会移动到父元素的左边，而不是还处在原来的位置。
为了解决这种情况，需要给那些需要移动位置的元素 嵌套一个父元素，让他们的父元素去定位，给他们的父元素设置relative，这样原先的父元素就变成了爷元素。
这样一来，再给他们设置完绝对定位加位置属性之后就不会出现重叠的效果，因为他们都是在父元素的限度内去移动，再跑也跑不出来。这样就又不重叠，又能贴近底部，但是需要注意。
新嵌套的父元素需要一个固定的高度，高度要高于内部元素。不然他的高度就是被内部元素撑开的。
示例：
<!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>效果图：
如果是文字（块级元素没试过，到时候可以试一下）。那么需要给包着文字的那个div设置成 display：table-cell+ vertical：bottom。这样文字就贴着div底部了。
示例：
HTML：
<div>文字在div的底部对齐</div>css样式：
div{ width:200px;height:50px; border:4px solid #beceeb; display:table-cell; vertical-align:bottom; }效果图：
感谢各位的阅读！关于“html设置文字向下的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
--结束END--
本文标题: html设置文字向下的方法
本文链接: https://lsjlt.com/news/247157.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0