如何用HTML/CSS在div中排列6个带href的图片（两行各3张）？

嘿，我来帮你搞定这个图片布局的麻烦！你遇到的问题大概率是调整图片尺寸后，容器宽度或者图片的盒模型没处理好，导致第三张图片放不下换行，最后变成了4上2下的混乱布局。下面给你两个简单靠谱的解决方案，用现在最流行的Grid或者Flexbox布局就能轻松搞定。

问题根源分析 #

当你调整图片尺寸后布局乱掉，通常是这两个原因：

• 容器宽度不足以容纳3张图片（加上图片之间的margin/padding），导致第三张被迫换行
• 图片默认是inline-block元素，自带的间隙或者固定宽度让总宽度超出了容器

解决方案1：用Grid布局（推荐，最直观） #

Grid布局是专门为二维布局设计的，直接指定每行3列，自动分配宽度，完全不用手动计算，非常省心。

完整代码示例 #

HTML结构（优化了层级，更易维护）

<body>
  <div class="pagepicturecontainer">
    <h2>Test Gallery</h2>
    <!-- 用ul包裹图片项，语义更清晰 -->
    <ul class="gallery">
      <li class="gallery-item">
        <a href="sectest1.html">
          <img src="./img/bike1tl.jpg" alt="Bike 1" />
        </a>
      </li>
      <li class="gallery-item">
        <a href="sectest2.html">
          <img src="./img/bike2tl.jpg" alt="Bike 2" />
        </a>
      </li>
      <li class="gallery-item">
        <a href="sectest3.html">
          <img src="./img/bike3tl.jpg" alt="Bike 3" />
        </a>
      </li>
      <li class="gallery-item">
        <a href="sectest4.html">
          <img src="./img/bike4tl.jpg" alt="Bike 4" />
        </a>
      </li>
      <li class="gallery-item">
        <a href="sectest5.html">
          <img src="./img/bike5tl.jpg" alt="Bike 5" />
        </a>
      </li>
      <li class="gallery-item">
        <a href="sectest6.html">
          <img src="./img/bike6tl.jpg" alt="Bike 6" />
        </a>
      </li>
    </ul>
  </div>
</body>

CSS样式

/* 先重置默认样式，避免浏览器自带的margin/padding干扰布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.pagepicturecontainer {
  max-width: 1200px; /* 给容器设置最大宽度，避免屏幕太宽时图片拉伸过度 */
  margin: 0 auto; /* 让容器居中 */
  padding: 2rem;
}

.pagepicturecontainer h2 {
  margin-bottom: 1.5rem;
}

/* 核心Grid布局 */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 直接指定每行3列，每列宽度均等 */
  gap: 1.5rem; /* 图片之间的间距，可根据你的需求调整大小 */
  list-style: none; /* 去掉ul的默认圆点 */
}

.gallery-item img {
  width: 100%; /* 图片宽度占满父容器 */
  height: auto; /* 保持图片的原始比例，避免变形 */
  display: block; /* 去掉图片下方的默认间隙（inline-block元素自带的） */
  /* 可选：给图片加个圆角，美化一下 */
  border-radius: 8px;
}

解决方案2：用Flexbox布局（兼容旧浏览器） #

如果需要兼容一些较老的浏览器，Flexbox也是个不错的选择，只需要稍微计算一下每个图片容器的宽度。

把上面CSS里的.gallery和.gallery-item替换成下面的代码即可：

.gallery {
  display: flex;
  flex-wrap: wrap; /* 空间不足时自动换行 */
  gap: 1.5rem;
  list-style: none;
}

.gallery-item {
  /* 计算每个图片容器的宽度：1/3容器宽度 减去 间隙的2/3（因为每行有2个间隙） */
  flex: 1 1 calc(33.333% - 1rem);
  max-width: calc(33.333% - 1rem);
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

关键注意事项 #

• 一定要把图片的固定宽度（比如width: 200px）改成width: 100%，让图片自适应父容器的宽度
• 用height: auto保证图片不会变形，保持原始比例
• 用display: block去掉图片下方的默认间隙，避免布局错位

这样调整后，你的6张图片就会稳稳地排成两行，每行3张啦！

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