javascript - 如何在css3中结束一列图像

Question

我有以下代码HTML

<div id="images" class="img"/>
 <img src="spiderman.png" alt=""/>
 <img src="superman.png" alt="" height="25%" width="25%"/>
 <img src="batman.png" alt="" />
</div>

CSS

.img {
  position: absolute;  
  right: 15%; 
  top: 30%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

.img2 {
box-shadow: 0px 0px 5px #fff;
  position: absolute;  
  right: 15%; 
  top: 30%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

JavaScript

(function() {

   function keyDown(event) {
     if (event.keyCode == 65) {
       if (document.getElementsByClassName("img").length > 0) {
         document.getElementsByClassName("img")[0].className = "img2"
       } else {
         document.getElementsByClassName("img2")[0].className = "img"
       }
     }
   }

   document.addEventListener('keydown', keyDown);
 })();

哪些输出

此代码将一列中的三个图像对齐，当我按下“a”键时，它会突出显示这些图像，我遇到的唯一问题是该列似乎没有结束，我不知道如何解决这个问题。

Answer 1

图片部分:

<div id="images" class="img"/>

在不该结束的时候结束了。删除斜杠并运行

<div id="images" class="img">
    <img src="spiderman.png" alt=""/>
    <img src="superman.png" alt="" height="25%" width="25%"/>
    <img src="batman.png" alt="" />
</div>

问题似乎与 superman.png 图像有关。它使用图像的原始高度和宽度。所以它缩小了显示的图像，但在测量时仍然认为它很大，因此列中的开放空间更大。