display:inline-block失效：两个.wgs元素为何堆叠而非并排？

核心问题分析 #

• 绝对定位覆盖display属性：元素设置position: absolute时会完全脱离文档流，display: inline-block会被浏览器忽略，两个.wgs元素默认堆叠在左上角。
• CSS尺寸缺失单位：所有height、width属性的值未添加px单位，浏览器无法正确解析元素尺寸，导致布局计算错误。
• 内部元素尺寸溢出：.wgs设置的宽度(220)远小于内部.wgs-mole-hill的宽度(482)，即使解决定位问题，内容溢出也会打乱排版。

修复步骤 #

1. 移除绝对定位，启用inline-block：删掉.wgs的position: absolute，或改为position: relative（需内部元素绝对定位时保留），让display属性生效。
2. 补充尺寸单位：所有height、width值后添加px，确保浏览器正确计算元素大小。
3. 调整.wgs宽度适配内部元素：将.wgs的width设置为至少能容纳内部最大元素的宽度（比如482px），避免内容溢出影响并排布局。

修复后的代码 #

HTML（无需修改） #

<div class="wgs"> 
        <img class="wgs-mole-head"
      src="/Users/c/whack-a-mole/mole-head.png"
      alt="Mole Head">
  <img class="wgs-mole-hill"
  src="/Users/c//whack-a-mole/mole-hill.png">
</div>
<div class="wgs"> 
        <img class="wgs-mole-head"
      src="/Users/c/whack-a-mole/mole-head.png"
      alt="Mole Head">
  <img class="wgs-mole-hill"
  src="/Users/c//whack-a-mole/mole-hill.png">
</div>

CSS #

.wgs {
  height: 640px;
  width: 482px; /* 适配内部mole-hill的宽度 */
  display: inline-block;
  position: relative; /* 作为内部绝对定位元素的基准 */
  margin-right: 20px; /* 可选：添加间距避免元素紧贴 */
}

.wgs-mole-head {
  height: 640px;
  width: 356px;
  position: absolute;
  left: 109px;
}

.wgs-mole-hill {
  height: 640px;
  width: 482px;
  position: absolute;
  top: 262px;
}

替代方案（flex布局更简洁） #

如果希望快速实现并排布局，可给.wgs的父容器添加flex样式：

.wgs-container {
  display: flex;
  gap: 20px; /* 控制元素间距 */
}

内容的提问来源于stack exchange，提问作者Caleb C Simmons