如何在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：

<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图片上。 它使用图像的原始高度和宽度。 因此它缩小了显示图像，但在测量时仍然认为它很大，因此列中的空白空间更大。