PHP 輸出多圖片 Div 浮動排列整齊：固定高度容器 + CSS Flexbox/Grid 現代佈局方案

亂序原因

float: right 配合不等高圖片導致「階梯狀」錯位：高圖片佔據多行空間，後續浮動元素卡在高度較矮處。

方案一：固定容器高度 + object-fit (快速修復)

方案二：Flexbox 等高自適應 (推薦現代瀏覽器)

.gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.item { flex: 1 1 300px; min-width: 250px; }
.item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

方案三：CSS Grid 瀑布流 (最少代碼)

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  grid-auto-flow: dense; /* 緊湊填充 */
}
.item img { width: 100%; height: auto; }

PHP 輸出最佳實踐

• 使用模板引擎或簡單 include 'template.php' 分離 HTML/邏輯。
• 圖片 URL 經 htmlspecialchars 轉義防 XSS。
• 大量圖片分頁/無限滾動加載，避免首屏阻塞。