当在其他浏览器中使用时，浮动div在Chrome中不起作用

Question

我的HTML页面中有四个链接。（页面左侧）。当我点击链接时，我需要为每个链接显示和隐藏相关的div。

如果我点击第一个链接，那么我需要在页面右侧显示第一个div。再次，如果我点击第二个链接，那么我需要在第一个div后显示第二个div。

要做到这一点，我已将所有这些div对齐到左侧。（给定样式为“float：left”）。这在Firefox和IE中正常工作。但在谷歌浏览器中不起作用。我可以看到所有这些div在chrome中处于相同的位置而不是一个接一个。

如果有人能给出有用的答案，我真的很感激。谢谢你

Answer 1

确保将所有这四个div放在另一个div（容器）中，并将包含div的宽度设置为与四次潜水相同或仅大2-3px。像这样：

<div id="container" style="width: 202px">
    <div id="inner1" style="width: 200px; float: left"></div>
    <div id="inner2" style="width: 200px; float: left"></div>
    <div id="inner3" style="width: 200px; float: left"></div>
    <div id="inner4" style="width: 200px; float: left"></div>
</div>

如果你使用浮动定位，你应该总是使用一个容器div，它会告诉你的浏览器确定内部div的位置。我总是被告知，使用没有容器的浮动可能会在任何浏览器中产生不可预测的结果。