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

【问题标题】：How to automatically Left Align an image in html or javascript如何在 html 或 javascript 中自动左对齐图像
【发布时间】：2013-02-08 01:48:22
【问题描述】：

下面是我的代码，其中三个图像彼此水平对齐。单击每个图像后，我添加了一些简单的操作来删除其他图像，但如果单击图像 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>

这是我在另一个函数中的代码，如果单击图像 1，它会隐藏图像 2 和 3，很抱歉漏掉了。

 document.getElementById('V2').style.visibility = 'hidden';
 document.getElementById('V3').style.visibility = 'hidden';

【问题讨论】：

你是如何删除它们的？你的 javascript 代码是什么？
@Axel：很抱歉漏掉了。我刚刚将它添加到我的代码/问题的底部。

标签： javascript css image html

【解决方案1】：

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

您要做的是删除块曾经所在的空间，方法是将display 属性设置为none。

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

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

执行此操作后，您会注意到该块将被移除，并且它周围的元素将塌陷到隐藏块所在的区域。

【讨论】：

【解决方案2】：

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

【讨论】：

抱歉，我刚刚添加了用于隐藏对应图像的代码