多个div具有相同的id无效？

我正在使用 javascript（无库）开发一个所见即所得页面，因为它有一个相当专业的应用程序，所以必须自定义构建而不是现成的。

令人惊讶的是，我已经取得了很大的进展，并且已经基本完成，但我在正确显示方面遇到了一些困难。

我有一个 div，其中包含文本和图像，图像向右浮动，因此文本围绕它们流动。

在某些地方，我需要将图像居中，因此我插入了一个 div 来包含它们。

下面的代码说明了这一点并且效果很好。

如果我有多个包含居中图像的 div，就会出现问题，因为这些居中 div 的 ID 是相同的。

如果我将居中 div 更改为一个类，则图像不会居中，而是假定父 div 的正确浮动。

有什么办法可以克服这个问题吗？

多个具有相同 id 的 div 是否存在任何实际问题？

我不担心支持 FF 以外的任何浏览器。

任何建议将不胜感激，感谢您的阅读。

昏暗的蒂姆:o)

#details {
    width: 698px;
    background-color: #FFC;
}

#details img {
    float: right;
}   

.centreimage img {
    float: none;
}

.centreimage {
    float: none;
    text-align: center;
}




<div id="details">
  <p>Some text here</p>  
<img src="10750bath.jpg" height="166" width="250"> 
 <p>Which flows around the image on the right</p>
 <p>blah</p>
 <p>blah</p>
 <p>blah</p>
 <p>blah</p>
 <p>blah</p>
 <p>blah</p>

<p>The next image should be centred</p>

<div><img src="10750bath.jpg" width="250" height="166" class="centreimage"></div>

<p>more text</p>
<p>more text</p>
</div>

感谢大家的帮助。

即使我将 CSS 和 HTML 更改为一个类，图像仍然无法居中。

答案就在佩卡的线索中，而特异性就是原因。

特异性规则赋予 ID 比类别更高的优先级。

“details”div 有一个 ID，但“centreimage”是一个类。

我将“详细信息”的 CSS 更改为一个类（当然还有标记），现在它可以工作了。

不敢相信我花了至少 10 个小时试图解决这个问题，所以感谢大家的帮助。

（现在你知道为什么我是“Dim Tim”了）：o）

是的，多个div具有相同的id是无效的。

使用类应该可以正常工作：

div.details {
    width: 698px;
    background-color: #FFC;
}

如果这些规则真的被覆盖，你可能会制定另一个具有更高级别的规则特异性。在这种情况下，您必须向我们展示更多 HTML 内容。