四图共角布局实现：有无替代HTML+CSS方案？

这个问题我太有共鸣了！用绝对定位对齐图片确实能精准实现共享角的效果，但table单元格高度塌陷的问题真的很影响页面布局。下面给你两个实用的解决方案，既能达到你想要的视觉效果，又能解决高度/宽度塌陷的问题：

方案1：CSS Grid（推荐，现代布局方式） #

CSS Grid天生适合这种2x2的网格布局，而且不需要依赖table，代码更简洁，还能自动根据图片尺寸撑满容器，完全不会出现塌陷问题。

代码示例： #

.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0; /* 网格间距设为0，确保图片能精准对齐中心 */
  width: 100%;
  max-width: 600px; /* 可根据需求调整最大宽度 */
  margin: 0 auto;
}

.grid-item {
  position: relative;
  overflow: hidden; /* 防止图片超出网格项范围 */
}

/* 每个方向的图片对齐到网格中心角 */
.top-left img {
  position: absolute;
  bottom: 0;
  right: 0;
}

.top-right img {
  position: absolute;
  bottom: 0;
  left: 0;
}

.bottom-left img {
  position: absolute;
  top: 0;
  right: 0;
}

.bottom-right img {
  position: absolute;
  top: 0;
  left: 0;
}

<div class="image-grid">
  <div class="grid-item top-left">
    <img src="http://placekitten.com/200/300" alt="Cat 1">
  </div>
  <div class="grid-item top-right">
    <img src="http://placekitten.com/300/300" alt="Cat 2">
  </div>
  <div class="grid-item bottom-left">
    <img src="http://placekitten.com/300/100" alt="Cat 3">
  </div>
  <div class="grid-item bottom-right">
    <img src="http://placekitten.com/200/200" alt="Cat 4">
  </div>
</div>

这种方式下，grid容器会自动根据网格项里的图片尺寸计算自身的高度和宽度，响应式调整也更灵活。

方案2：修复原有的Table布局 #

如果你还是想沿用table的结构，可以通过给td设置最小尺寸或者用JavaScript动态计算图片尺寸的方式，让td获取到高度和宽度，避免塌陷：

代码示例： #

table {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border-collapse: collapse; /* 去掉表格边框间距 */
}

td {
  position: relative;
  /* 根据你常用的图片尺寸设置最小宽高，避免塌陷 */
  min-width: 200px;
  min-height: 150px;
}

/* 保留你原来的图片定位规则 */
.top img { bottom: 0; }
.bottom img { top: 0; }
.left img { right: 0; }
.right img { left: 0; }

img {
  position: absolute;
  /* 可选：限制图片最大尺寸，防止超出单元格 */
  max-width: 100%;
  max-height: 100%;
}

<table>
  <tr>
    <td class="top left">
      <img src="http://placekitten.com/200/300" alt="Cat 1">
    </td>
    <td class="top right">
      <img src="http://placekitten.com/300/300" alt="Cat 2">
    </td>
  </tr>
  <tr>
    <td class="bottom left">
      <img src="http://placekitten.com/300/100" alt="Cat 3">
    </td>
    <td class="bottom right">
      <img src="http://placekitten.com/200/200" alt="Cat 4">
    </td>
  </tr>
</table>

如果图片尺寸是完全动态的，还可以用JavaScript获取每个图片的宽高，然后设置对应td的min-width和min-height，这样td就能完美适配图片尺寸，彻底解决塌陷问题。

内容的提问来源于stack exchange，提问作者Skippy le Grand Gourou