如何用纯HTML & CSS实现7张图片横向排列（无需jQuery/JS）

下面是几个纯HTML+CSS的实现方案，无需任何JS/jQuery，按需选择即可：

方案1：Flexbox（推荐，现代布局首选） #

Flexbox是目前最简洁高效的布局方式，能轻松实现同行排列，还自带响应式适配能力。

HTML结构 #

<div class="image-container">
  <img src="img1.jpg" alt="图片1">
  <img src="img2.jpg" alt="图片2">
  <img src="img3.jpg" alt="图片3">
  <img src="img4.jpg" alt="图片4">
  <img src="img5.jpg" alt="图片5">
  <img src="img6.jpg" alt="图片6">
  <img src="img7.jpg" alt="图片7">
</div>

CSS代码 #

.image-container {
  display: flex;
  gap: 8px; /* 图片之间的间距，可根据需求调整 */
  width: 100%; /* 让容器占满父元素宽度 */
}

.image-container img {
  flex: 1; /* 让所有图片平分容器宽度，自动适配 */
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
  height: auto; /* 高度随宽度自适应 */
}

说明：flex:1会让每张图片自动分配容器剩余空间，确保同行排列；object-fit:cover可以防止图片拉伸，如果你需要图片完整显示，换成object-fit:contain即可。

方案2：CSS Grid（适合需要精确列控制的场景） #

Grid布局适合更规整的网格排列，能直接指定列数，实现等宽排列。

HTML结构 #

和方案1完全相同，无需修改。

CSS代码 #

.image-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 直接指定7列，每列等宽 */
  gap: 8px;
  width: 100%;
}

.image-container img {
  width: 100%;
  object-fit: cover;
  height: auto;
}

说明：repeat(7,1fr)表示生成7个宽度相等的列，每个列占1份可用空间，实现完美的等宽排列。

方案3：inline-block（兼容旧浏览器的传统方案） #

如果需要兼容IE8等旧浏览器，可以用这个方案，但需要处理元素间的空白问题。

HTML结构 #

<div class="image-container">
  <img src="img1.jpg" alt="图片1">
  <img src="img2.jpg" alt="图片2">
  <img src="img3.jpg" alt="图片3">
  <img src="img4.jpg" alt="图片4">
  <img src="img5.jpg" alt="图片5">
  <img src="img6.jpg" alt="图片6">
  <img src="img7.jpg" alt="图片7">
</div>

CSS代码 #

.image-container {
  font-size: 0; /* 消除inline-block元素间的空白间隙 */
  width: 100%;
}

.image-container img {
  display: inline-block;
  width: calc(100% / 7 - 6px); /* 减去间距的一半，因为每个图片左右都有margin */
  margin: 0 3px; /* 图片间距 */
  object-fit: cover;
  height: auto;
}

说明：font-size:0是为了消除inline-block元素之间的换行空白；calc(100%/7 - 6px)是因为每个图片有左右各3px的margin，需要从总宽度中减去这些额外空间，避免换行。

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