防止一张图像在 HTML/CSS 中与另一张图像错位

Question

我有一个动态生成的行星列表。在通过 knockout.js 检测到这些行星的某些属性后，可能会向它们添加一两个图标以指示某些特征。图标是绿色圆圈和蓝色推进器。

将任一图标添加到行星时，它看起来都很好，但如果同时添加了两个图标，推进器就会错位。

- 正确对齐

- 未对齐

<div class="all-planets" data-bind="foreach: selection.system().planets()">
  <div
    class="div_planet"
    data-placement="right"
    data-bind="tooltip: $root.gwaioPlanetData[$index()]"
  >
    <img
      style="height: 20px; width: 20px"
      data-bind="attr: { src: 'coui://ui/main/shared/img/planets/' + $data.generator.biome + '.png' }"
    />
    <img
      data-bind="visible: $data.starting_planet"
      class="img_start"
      src="coui://ui/main/game/live_game/img/planet_list_panel/icon_planet_start.png"
    />
    <img
      data-bind="visible: $data.required_thrust_to_move > 0"
      class="thruster_count"
      src="coui://ui/main/game/server_browser/img/icon_thruster.png"
    />
  </div>
</div>

#system-detail .all-planets {
  margin: 0px 0px 0px 0px;
  padding: 0px 16px 0px 4px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#system-detail .div_planet {
  height: 20px;
  width: 20px;
  margin: 4px;
}

#system-detail img.img_start {
  height: 16px;
  width: 16px;
  position: relative;
  top: -12px;
  right: -10px;
}

#system-detail .thruster_count {
  height: 12px;
  width: 13px;
  position: relative;
  top: -8px;
}

我担心这只是我对 CSS 显示缺乏了解。我发现如果我在两个<img> 标签周围添加<div> 标签，然后为推进器图像设置绝对位置，我可以对齐推进器。然而，行星可能会环绕并形成第二排，这会破坏这种设置。这也使得设置非常脆弱，因为该区域可能会发生变化。

我应该怎么做才能防止绿色圆圈图像干扰蓝色推进器图像的位置？

编辑：我添加了图标（所有行星尺寸都相同）

Answer 1

我利用淘汰赛设置了两个不同的类，根据两个图标是否都存在来确定使用哪个类。这允许我设置两个不同的 CSS 类选择器。

    <div class="start" data-bind="visible: $data.starting_planet">
      <img
        class="img_start"
        src="coui://ui/main/game/live_game/img/planet_list_panel/icon_planet_start.png"
      />
      <img
        data-bind="visible: $data.required_thrust_to_move > 0"
        class="thruster_count"
        src="coui://ui/main/game/server_browser/img/icon_thruster.png"
      />
    </div>
    <div
      class="no_start"
      data-bind="visible: !$data.starting_planet && $data.required_thrust_to_move > 0"
    >
      <img
        class="thruster_count"
        src="coui://ui/main/game/server_browser/img/icon_thruster.png"
      />
    </div>

#system-detail .start .thruster_count {
  height: 12px;
  width: 13px;
  position: relative;
  top: -25px;
  right: 2px;
}

#system-detail .no_start .thruster_count {
  height: 12px;
  width: 13px;
  position: relative;
  top: -8px;
  right: 2px;
}

Answer 2

您可以尝试的另一种方法可能是这样的（我已经删除了一些不直接处理定位的代码）。添加边界和额外的行星是为了展示它是如何工作的：

.all-planets {
  margin: 0px 0px 0px 0px;
  padding: 0px 16px 0px 4px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.div_planet {
  height: 20px;
  width: 20px;
  margin: 4px;
  position: relative;
  border: 1px solid blue;
  background: url("https://i.stack.imgur.com/w0Ptk.png") no-repeat 50% 50%;
  padding: 0.5em;
}

img.img_start {
  height: 16px;
  width: 16px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.thruster_count {
  height: 12px;
  width: 13px;
  position: absolute;
  bottom: 0;
  right: 0;
}

<div class="all-planets" data-bind="foreach: selection.system().planets()">
  <div class="div_planet" data-placement="right" data-bind="tooltip: $root.gwaioPlanetData[$index()]">
    <img data-bind="visible: $data.starting_planet" class="img_start" src="https://i.stack.imgur.com/o9Q3m.png" />
    <img data-bind="visible: $data.required_thrust_to_move > 0" class="thruster_count" src="https://i.stack.imgur.com/BX1cQ.png" />
  </div>
  <div class="div_planet" data-placement="right" data-bind="tooltip: $root.gwaioPlanetData[$index()]">
    <img data-bind="visible: $data.starting_planet" class="img_start" src="https://i.stack.imgur.com/o9Q3m.png" />
    <img data-bind="visible: $data.required_thrust_to_move > 0" class="thruster_count" src="https://i.stack.imgur.com/BX1cQ.png" />
  </div>
  <div class="div_planet" data-placement="right" data-bind="tooltip: $root.gwaioPlanetData[$index()]">
    <img data-bind="visible: $data.starting_planet" class="img_start" src="https://i.stack.imgur.com/o9Q3m.png" />
    <img data-bind="visible: $data.required_thrust_to_move > 0" class="thruster_count" src="https://i.stack.imgur.com/BX1cQ.png" />
  </div>
</div>