如何解决防止一个图像在 HTML/CSS 中与另一个图像错位
我有一个动态生成的行星列表。在通过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 展示方面的知识。我发现如果我在两个 <div>
标签周围添加 <img>
标签,然后为推进器图像设置绝对位置,我可以对齐推进器。然而,行星可能会环绕并形成第二排,这会破坏这种设置。这也使设置非常脆弱,因为该区域可能会发生变化。
我应该怎么做才能防止绿色圆圈图像干扰蓝色推进器图像的位置?
编辑:我添加了图标(所有行星尺寸都相同)
解决方法
我利用淘汰赛来设置两个不同的类,根据两个图标是否都存在来确定使用哪个。这允许我设置两个不同的 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;
}
,
您可以尝试的另一种方法可能是这样的(我删除了一些不直接处理定位的代码)。添加了边界和额外的行星是为了展示它是如何工作的:
.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。