CSS+Div 讓兩張圖片水平並排顯示的技巧

問題現象

使用 div 包裹圖片時，第二張圖片總是掉到下一行，無法與第一張圖片水平對齊（如圖所示）。

核心解法

將圖片容器設為 行內區塊 或使用 浮動，讓其並排顯示。

方法一：使用 display: inline-block（推薦）

<div class="img-container">
  <img src="left.jpg" alt="左圖">
  <img src="right.jpg" alt="右圖">
</div>

<style>
.img-container img {
  display: inline-block;
  vertical-align: top; /* 避免底部間隙 */
  width: 48%; /* 視需求調整寬度 */
}
</style>

方法二：使用 float: left

<div class="clearfix">
  <img src="left.jpg" style="float:left;" alt="左圖">
  <img src="right.jpg" style="float:left;" alt="右圖">
</div>
<style>
.clearfix::after { content: ""; display: table; clear: both; }
</style>

方法三：Flexbox 現代佈局（最彈性）

<div style="display: flex; gap: 10px;">
  <img src="left.jpg" alt="左圖">
  <img src="right.jpg" alt="右圖">
</div>

常見誤區

• <p>、<div> 等區塊元素預設佔滿整行，直接包裹 <img> 會導致換行。
• 圖片之間若有換行符/空白，inline-block 會產生微小間隙，可透過 font-size: 0 於父容器或移除 HTML 空白解決。

依專案相容性需求選擇方案，現代瀏覽器首推 Flexbox，簡潔強大。