溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html設(shè)置文字向下的方法

發(fā)布時(shí)間：2021-02-25 11:52:31 來(lái)源：億速云 閱讀：1076 作者：小新 欄目：web開(kāi)發(fā)

這篇文章給大家分享的是有關(guān)html設(shè)置文字向下的方法的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

html設(shè)置文字向下的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后在body中定義一段文字內(nèi)容；接著在父元素中設(shè)置css屬性“position:relative”；最后在存放文字的子元素中設(shè)置css屬性為“boottom:0”即可。

1、如果是文字或者其他塊級(jí)元素。使用定位的思想。position：absolute，然后boottom：0。父元素要設(shè)置為position：relative。

因?yàn)榻^對(duì)定位是相對(duì)于最近一個(gè)非static定位的元素的相對(duì)位置。 但是如果出現(xiàn)多個(gè)元素在同一父元素內(nèi) 同時(shí)需要絕對(duì)定位移動(dòng)位置，那么需要注意，如果直接這樣做，會(huì)造成那些元素重疊，而不是與float一樣的正常排布。

這是因?yàn)樗麄冇邢嗤母冈?，使用絕對(duì)定位之后就都會(huì)移動(dòng)到父元素的左邊，而不是還處在原來(lái)的位置。

為了解決這種情況，需要給那些需要移動(dòng)位置的元素 嵌套一個(gè)父元素，讓他們的父元素去定位，給他們的父元素設(shè)置relative，這樣原先的父元素就變成了爺元素。

這樣一來(lái)，再給他們?cè)O(shè)置完絕對(duì)定位加位置屬性之后就不會(huì)出現(xiàn)重疊的效果，因?yàn)樗麄兌际窃诟冈氐南薅葍?nèi)去移動(dòng)，再跑也跑不出來(lái)。這樣就又不重疊，又能貼近底部，但是需要注意。

新嵌套的父元素需要一個(gè)固定的高度，高度要高于內(nèi)部元素。不然他的高度就是被內(nèi)部元素?fù)伍_(kāi)的。

示例：

<!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>無(wú)標(biāo)題文檔</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>

效果圖：

html設(shè)置文字向下的方法

2、如果是文字（塊級(jí)元素沒(méi)試過(guò)，到時(shí)候可以試一下）。那么需要給包著文字的那個(gè)div設(shè)置成 display：table-cell+ vertical：bottom。這樣文字就貼著div底部了。

示例：

HTML：

<div>文字在div的底部對(duì)齊</div>

css樣式：

div{
    width:200px;height:50px;  /*設(shè)置div的大小*/
    border:4px solid #beceeb; /*為了便于觀察，顯示出邊框*/
    display:table-cell; 
    vertical-align:bottom;
    }

效果圖：

html設(shè)置文字向下的方法

感謝各位的閱讀！關(guān)于“html設(shè)置文字向下的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手