怎么用CSS將DIV的內(nèi)容與底部對(duì)齊

發(fā)布時(shí)間：2022-02-24 15:08:49 來源：億速云閱讀：400 作者：小新欄目：web開發(fā)

這篇文章主要介紹了怎么用CSS將DIV的內(nèi)容與底部對(duì)齊，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

答案：使用CSSposition屬性

您可以使用CSS定位方法將DIV的內(nèi)容與底部對(duì)齊。

在下面的示例中，具有.contentclass的DIV元素將放置在.boxDIV元素的底部。讓我們嘗試一下以了解其實(shí)際工作原理：

例試試這個(gè)代碼»

<!DOCTYPE html>

<head>

<title>CSS Align Content of a Div to the Bottom</title>

<style>

.box{

color: #fff;

background: #000;

position: relative;

min-height: 200px;

padding-bottom: 30px; /* to avoid content overlapping */

}

.box .content{

position: absolute;

bottom: 0;

left: 0;

}

</style>

</head>

<body>

<h2>Page Title</h2>

<div class="content">This piece of text will remain at the bottom of the parent div all the time.</div>

</div>

</body>

</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么用CSS將DIV的內(nèi)容與底部對(duì)齊”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

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

猜你喜歡