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

我正在开发一个使用javascript（无库）的wysiwyg页面，因为它有一个相当专业化的应用程序，它必须定制而不是现成的。具有相同ID的多个div无效？

令人惊讶的是，我有很长的路要走，它非常完整，但我有一些困难让显示正确。

我有一个包含文本和图像的图像，图像右侧浮动，文本在它们周围流动。

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

下面的代码说明了这一点，它运作良好。

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

如果我改变centreing divs到一个类的图像不居中，但假设父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更改为类时，图像仍然无法居中。

答案出自Pekka线索，特异性是原因。

特殊性规则给予一个ID比一个类更高的优先级。

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

我将“细节”的CSS更改为一个类（当然，标记为&），现在它可以工作。

不能相信我花了至少10个小时试图整理，谢谢大家的帮助。

（现在你知道为什么我在“点心添”）：O）

来源

2012-08-08 user1583844

此外，检查规格[7.5.2元素标识符：id和类属性]（http://www.w3.org/TR/html401/struct/global.html#h-7.5.2） – 2012-08-08 08:04:09

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

使用类应该很好地工作：

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

如果这些规则真正得到覆盖，你可能在具有较高specificity地方其他规则。在这种情况下，你将不得不向我们展示更多的HTML。

来源

2012-08-08 07:58:19

啊！就是这样。特异性！谢谢你的帮助。 – user1583844 2012-08-08 08:24:00

你不应该用相同的ID不止一个元素。这是无效的，会给出未定义的结果。

如果您将您的div id更改为某个类，则需要适当更改CSS以将该类定位到该类而不是该id。 CSS类的目的恰恰就是 - 针对多个相关元素并应用相同的样式。

只要您正确定位元素，结果就不会有差异。

来源

2012-08-08 07:58:02 Flash

许多谢谢。我确实改变了标记以及CSS，但是我没有提及它。抱歉。 – user1583844 2012-08-08 08:41:37

正如你应该知道每个id应该是唯一的。在你的示例输出中似乎是一个小错误。尝试将class属性设置为div而不是图像。如果你没有圆顶的好理由，你应该每次更好的课堂属性。

现在是您的图像的孩子的文本对齐集，例如如果图像无法加载，那将是alt值。

来源

2012-08-08 08:00:14 rekire

哎呀！是的，这是一个错误的复制/粘贴。如此多的编辑。该类确实适用于div。谢谢。 – user1583844 2012-08-08 08:43:47

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

回答

相关问题