CSS 左右照片底部對齊是一個非常實用的布局技巧。無論是在設計網頁、博客還是社交媒體，圖片始終是不可或缺的元素之一。但是，當你想將兩張圖片并排展示時， 如果圖片的尺寸不同，那么它們的底部會很難對齊，這就影響了頁面的美觀度。那么，正解各位的問題就是如何使用 CSS 左右照片底部對齊。

下面我們就來看一下該如何實現。

<div class="photos">
<img src="photo1.jpg" alt="photo1">
<img src="photo2.jpg" alt="photo2">
</div>
<style>
.photos {
display: flex;
align-items: flex-end;
}
img {
max-width: 100%;
height: auto;
}
</style>

首先，在 HTML 中使用 "div" 標簽來包含我們的圖片。接下來，在 CSS 中，使用 "flexbox" 布局的 "display: flex"，它可以幫助我們快速地將兩個元素放在同一水平線上。為使圖片底部對齊，我們可以使用 "align-items: flex-end" 屬性。此屬性用于指定 flex 容器的對齊方式。而 "flex-end" 值則指定了容器內項目的底部對齊方式，所以我們就成功的讓圖片底部對齊了。

最后，只需要使用 "max-width" 和 "height" 屬性來保持圖片比例粉筆，同時縮小圖片到適合大小就好了。

通過這樣簡單的 CSS，我們就可以左右照片底部對齊，降低頁面混亂情況的出現。也歡迎更多的童鞋嘗試一下！