如何用HTML/CSS结合列表实现规整的多尺寸图片马赛克布局？

嘿，这个需求完全可以搞定！用列表来做图片马赛克布局其实和用div思路大同小异，只是把容器换成<ul>，每个图片项换成<li>就行，我给你整理了个实操方案：

1. 基础HTML结构 #

先搭好列表的骨架，给需要双倍高度的列表项加个专属类（比如double-height），方便后续用CSS控制：

<ul class="mosaic-grid">
  <li class="mosaic-item">
    <img src="你的图片地址" alt="图片描述">
  </li>
  <li class="mosaic-item double-height">
    <img src="你的图片地址" alt="图片描述">
  </li>
  <li class="mosaic-item">
    <img src="你的图片地址" alt="图片描述">
  </li>
  <!-- 按需添加更多列表项即可 -->
</ul>

2. CSS核心样式（推荐用CSS Grid） #

比起你提到的float，CSS Grid处理这种网格布局会更稳定，对齐也更精准，完全不用操心float的 clearfix 或者错位问题：

/* 先重置列表的默认内外边距和项目符号 */
.mosaic-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 定义网格：这里设成每行2列，你可以根据需求改成3列、4列 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px; /* 图片之间的间距，可自行调整 */
}

/* 普通图片项的基础样式 */
.mosaic-item {
  overflow: hidden; /* 避免图片超出容器 */
  border-radius: 4px; /* 可选，加个圆角让视觉更柔和 */
}

/* 让图片填满容器，同时保持比例不变形 */
.mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 裁剪多余部分，保证图片比例正常 */
}

/* 给双倍高度的项设置跨行属性 */
.mosaic-item.double-height {
  grid-row: span 2; /* 让这个项占据2行的高度 */
}

3. 可选的响应式调整 #

如果需要适配手机等小屏幕，加个媒体查询就能轻松搞定：

@media (max-width: 768px) {
  .mosaic-grid {
    grid-template-columns: 1fr; /* 小屏幕下改成单列布局 */
  }
  .mosaic-item.double-height {
    grid-row: span 1; /* 单列时不需要双倍高度了，统一高度更美观 */
  }
}

补充说明 #

你之前提到用float实现更简便，但float布局处理跨行元素很容易出现对齐bug，尤其是当页面缩放或者图片加载有延迟的时候。CSS Grid是专门为这种网格场景设计的，代码更简洁，布局稳定性也高，完全能满足你要的整齐对齐效果。

内容的提问来源于stack exchange，提问作者Manoel Sousa