显示：内联块不起作用，打地鼠游戏

Question

我必须制作一个“打地鼠”游戏，但我无法将前两个元素与“显示：内联块”正确对齐。你能告诉我我做错了什么吗？它们垂直对齐，我需要它们并排放置。

.wgs {
  display: inline-block;
  width: 640px;
  height: 482px;
  position: relative;
}

.wgs__mole-head {
  left: 109px;
  width: 376px;
  height: 356px;
  position: absolute;
}

.wgs__mole-hill {
  left: 0px;
  width: 640px;
  height: 220px;
  position: absolute;
  top: 260px;
}

<div class="container">
  <div class="wgs"> (wgs= whackable game space)
    <div class="wgs__mole-head">
      <img src="mole-head.png" class="wgs-mole-head"></img>
    </div>
    <div class="wgs__mole-hill">
      <img src="mole-hill.png" class="wgs-mole-hill"></img>
    </div>
  </div>
  <div class="wgs">
    <div class="wgs__mole-head">
      <img src="mole-head.png" class="wgs-mole-head"></img>
    </div>
    <div class="wgs__mole-hill">
      <img src="mole-hill.png" class="wgs-mole-hill"></img>
    </div>
  </div>

</div>

Answer 1

如果你查看你的 HTML：

你需要把你的鼹鼠头和鼹鼠丘都放好

img

标签只在一个 div 元素内，如下所示：

<div class="wgs">
    <img src="mole-head.png" class="wgs-mole-head />
    <img src="mole-hill.png" class="wgs-mole-hill />
</div>

那应该有用！