在許多網站中，我們經常看到圖片和文字排列在一起。但是在排版過程中，我們往往會遇到一些問題，比如文字和圖片無法對齊的情況。在這種情況下，我們可以使用 CSS 來解決這個問題。 那么，如何用 CSS 實現圖片垂直底邊對齊呢？我們可以通過下面的步驟來實現。 首先，我們需要設置容器的 display 屬性為 flex，并在容器內包裹文字和圖片。代碼如下：

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

上面的代碼中，“align-items: flex-end”屬性可以讓容器中所有項目垂直對齊到容器的底部。接著，我們需要設置圖片的 vertical-align 屬性為 bottom，代碼如下：

.container img {
vertical-align: bottom;
/* 其他樣式 */
}

上面的代碼中，“vertical-align: bottom”屬性可以讓圖片與文字底部對齊。這樣，在容器內的文字和圖片就可以垂直底邊對齊了。 需要注意的是，這種方法只適用于內聯圖片，如果是塊級圖片，就需要設置圖片或其父元素的高度。同時，我們還可以通過其他 CSS 屬性，如 margin、padding、line-height 等來進一步調整文字和圖片之間的間距。 總之，通過上述步驟，我們可以很容易地實現圖片垂直底邊對齊。在實際開發中，我們應該結合具體情況來選擇合適的方法，以確保網站的排版效果優美、整潔。