CSS 實現兩張圖片左右對齊佈局

CSS 讓兩張圖片左右並排顯示

需求：將「江南風景」與「人物肖像」兩張圖片在同一行左右對齊顯示。

方法一：float 浮動（經典方案）

<div class="image-container">
    <img src="jiangnan.jpg" alt="江南風景" class="left-img">
    <img src="portrait.jpg" alt="人物肖像" class="right-img">
</div>

<style>
.image-container {
    overflow: hidden; /* 清除浮動，防止高度塌陷 */
}
.left-img {
    float: left;   /* 左側浮動 */
}
.right-img {
    float: right;  /* 右側浮動 */
}
</style>

方法二：Flexbox 彈性盒子（現代推薦）

<div class="flex-container">
    <img src="jiangnan.jpg" alt="江南風景">
    <img src="portrait.jpg" alt="人物肖像">
</div>

<style>
.flex-container {
    display: flex;
    justify-content: space-between; /* 兩端對齊 */
    align-items: center;            /* 垂直置中 */
    gap: 20px;                      /* 圖片間距 */
}
</style>

方法三：Grid 網格佈局

<div class="grid-container">
    <img src="jiangnan.jpg" alt="江南風景">
    <img src="portrait.jpg" alt="人物肖像">
</div>

<style>
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 等寬兩欄 */
    gap: 20px;
    align-items: center;
}
</style>

方法四：inline-block 行內區塊

<div class="inline-container" style="text-align: justify; font-size: 0;">
    <img src="jiangnan.jpg" alt="江南風景" style="display: inline-block; vertical-align: middle; width: 48%;">
    <img src="portrait.jpg" alt="人物肖像" style="display: inline-block; vertical-align: middle; width: 48%;">
</div>

方案比較

回應式設計建議

@media (max-width: 768px) {
    .flex-container {
        flex-direction: column; /* 手機改為上下堆疊 */
    }
}

建議使用 Flexbox，語意清晰、維護容易、支援現代瀏覽器回應式需求。