當(dāng)我們設(shè)計(jì)網(wǎng)頁布局時,常常遇到文本需要放在div底部的情況。這時我們可以使用CSS的定位屬性position和浮動屬性float來實(shí)現(xiàn)這一效果。
首先,我們需要為包含文本的div設(shè)置position:relative,這樣子容器內(nèi)的元素的定位就是以這個div為基準(zhǔn)的。接下來,我們就可以使用position:absolute將文本定位在底部。具體來說,我們可以設(shè)置bottom:0來將文本置于容器底部。
另一種實(shí)現(xiàn)方式是使用float屬性。我們可以將容器內(nèi)的文本用p標(biāo)簽包裹起來,設(shè)置height屬性和line-height屬性讓其高度占據(jù)整個容器高度。接著,就可以使用float:right將文本浮動到容器底部,實(shí)現(xiàn)底部對齊的效果。
下面是使用position屬性實(shí)現(xiàn)底部對齊的示例代碼:
div { position: relative; width: 300px; height: 200px; border: 1px solid black; } p { position: absolute; bottom: 0; }下面是使用float屬性實(shí)現(xiàn)底部對齊的示例代碼:
div { width: 300px; height: 200px; border: 1px solid black; } p { height: 100%; line-height: 200px; float: right; }以上就是實(shí)現(xiàn)CSS文本放在div底部的兩種方法,根據(jù)實(shí)際需要選擇合適的方式即可。