Question

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

令人惊讶的是，我有很长的路要走，而且非常完整，但我在显示器上遇到了一些困难。

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

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

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

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

如果我将中心div更改为一个类，则图像不会居中，但会假设父div的右浮动。

有没有办法克服这个问题？

是否存在具有相同ID的多个div的真正问题？

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

非常感谢任何建议，感谢阅读。

Dim Tim：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比类更高的优先级。

＆＃34;详情＆＃34; div有一个ID但是＆＃34; centreimage＆＃34;是一堂课。

我改变了CSS的＃34;详细信息＆＃34;到一个班级（当然还有一个标记），现在可以了。

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

（现在你知道我为什么＆＃34; Dim Tim＆＃34;）：o）

Answer 1

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

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

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

如果这些规则确实被覆盖，那么您可能有另一个具有更高specificity的规则。在这种情况下，您需要向我们展示更多HTML。

Answer 2

您不应该有多个具有相同ID的元素。这是无效的，会给出不确定的结果。

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

只要您正确定位元素，结果就没有区别。

Answer 3

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

现在是图片子项的文字对齐设置，例如如果无法加载图像，那将是alt值。

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

3 个答案: