如何在html或javascript中自动左对齐图像

下面是我的代码，其中有三个图像彼此水平对齐。单击每个图像后，我添加了一些简单的操作来删除其他图像，但是如果单击，图像2和图像3仍将保留在当前区域，而不是像图像1那样左对齐。如果单击图像2或图像3，是否有办法使其左对齐？非常感谢

<div style="width:510px; height:105px; padding:5px;">

    <img alt="Passenger Vehicle" id="V1" src="http://hou-agsprd02/images/basictruck.gif" onclick="Vehicle1()" style="width:150px; height:100px; border:1px solid blue; float:left;" />
    <img alt="Water Vehicle" id="V2" src="http://hou-agsprd02/images/WaterTruck.gif" onclick="Vehicle2()" style="width:150px; height:100px; border:1px solid blue; float:left;" />
    <img alt="Rig Transport Vehicle" id="V3" src="http://hou-agsprd02/images/GasTruck.gif" onclick="Vehicle3()" style="width:150px; height:100px; border:1px solid blue; float:left;" />

</div> 

---

你的Javascript代码是什么？？如果只是将图像隐藏起来，它仍然存在。您将需要从页面中实际删除图像，然后图像将填充它的位置，因为它们向左浮动。

您将可见性设置为“隐藏”，这实际上隐藏了块，但仍会占用布局中的空间

您要做的是通过将

display

属性设置为

none

来删除块曾经所在的空间

根据javascript代码，您可以将代码更改为：

document.getElementById('V2').style.display = 'none';
document.getElementById('V3').style.display = 'none';

---

执行此操作后，您会注意到该块将被删除，其周围的元素将塌陷到隐藏块曾经所在的区域。

如何删除它们？你的javascript代码是什么？@Axel:很抱歉漏掉了。我刚刚把它添加到我的代码/问题的底部。对不起，我刚刚添加了我用来隐藏相关图片的代码

document.getElementById('V2').style.display = 'none';
document.getElementById('V3').style.display = 'none';