Question

下面是我的代码，其中三个图像水平排列，彼此相邻。单击每个图像后，我添加了一些简单的动作来删除其他图像但是图像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';

Answer 1

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

您想要做的是将display属性设置为none，删除块曾经过的空间。

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

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

执行此操作后，您会注意到该块将被删除，并且它周围的元素将会折叠到隐藏块曾经存在的区域。

Answer 2

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

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

2 个答案: