使用CSS可以實現許多頁面布局的效果，其中一個常用的需求就是將元素沿底部對齊。本文將介紹一些常見的方法，讓你輕松掌握這個技巧。 第一種方法是使用定位屬性。我們可以先設置元素的定位方式為絕對定位（position:absolute），再使用bottom:0屬性，將其定位在父元素的底部。例如：

.parent {
position: relative;
}
.child {
position: absolute;
bottom: 0;
}

這樣，class為child的子元素就會被定位在class為parent的父元素的底部了。 第二種方法是使用flexbox布局。我們可以將父元素設為display:flex，并使用align-items屬性將元素垂直對齊方式設為flex-end，例如：

.parent {
display: flex;
align-items: flex-end;
}
.child {
/* 其他樣式 */
}

這樣，class為child的子元素就會被垂直對齊在class為parent的父元素的底部了。 第三種方法是使用grid布局。我們可以將父元素設為display:grid，并在網格中將子元素放在最后一行，例如：

.parent {
display: grid;
grid-template-rows: 1fr auto;
}
.child {
/* 其他樣式 */
grid-row: 2;
}

這里設置了網格的行模板，其中1fr表示會自動填充高度，auto表示高度為內容區域的高度。然后將class為child的子元素放在了第二行，也就是最后一行，這樣就實現了沿底部對齊。 總結一下，我們可以使用定位屬性、flexbox布局和grid布局三種方法將元素沿底部對齊。其具體代碼實現如上所述。使用這些方法，你可以更方便地解決元素布局問題。