這篇文章給大家分享的是有關html設置文字向下的方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
html設置文字向下的方法：首先創建一個HTML示例文件；然后在body中定義一段文字內容；接著在父元素中設置css屬性“position:relative”；最后在存放文字的子元素中設置css屬性為“boottom:0”即可。
1、如果是文字或者其他塊級元素。使用定位的思想。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>效果圖：
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;
}效果圖：
感謝各位的閱讀！關于“html設置文字向下的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
