有時(shí)我們需要在頁(yè)面上對(duì)圖片進(jìn)行對(duì)齊，讓頁(yè)面看起來(lái)更加美觀。其中一種對(duì)齊的方式就是讓圖片靠下對(duì)齊。那么如何使用 CSS 實(shí)現(xiàn)這種效果呢？ 首先，我們需要給圖片包裹一個(gè)父元素，并給它設(shè)置相應(yīng)的樣式。然后，再將圖片本身設(shè)置為 `vertical-align: bottom;`。 具體代碼如下：

<div class="image-wrapper">
<img src="example.jpg" alt="example" />
</div>

.image-wrapper {
display: inline-block; /* 把元素變成塊級(jí)元素的內(nèi)聯(lián)元素 */
vertical-align: bottom; /* 使元素與行框底部對(duì)齊 */
}
.image-wrapper img {
vertical-align: bottom; /* 圖片本身也要設(shè)置垂直對(duì)齊方式為 bottom */
}

通過以上代碼，圖片就可以實(shí)現(xiàn)靠下對(duì)齊的效果了。 需要注意的是，給父元素 `display: inline-block;` 的作用是將它變成塊級(jí)元素的內(nèi)聯(lián)元素，從而讓它可以與其他元素在同一行內(nèi)。同時(shí)，設(shè)置父元素的 `vertical-align: bottom;` 可以讓元素與行框底部對(duì)齊，從而實(shí)現(xiàn)圖片靠下對(duì)齊的效果。最后，再將圖片本身的 `vertical-align: bottom;` 設(shè)置為 bottom，可以消除一些瀏覽器間的兼容性問題。 總結(jié)起來(lái)，對(duì)于實(shí)現(xiàn)圖片靠下對(duì)齊這個(gè)問題，我們只需要將圖片的包裹元素設(shè)置為塊級(jí)元素的內(nèi)聯(lián)元素，并設(shè)置相應(yīng)的垂直對(duì)齊方式，再將圖片本身的垂直對(duì)齊方式也設(shè)置為 bottom 即可。