5

我正在使用 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 更改为一个类，图像仍然无法居中。

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

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

“详细信息” div 有一个 ID，但“中心图像”是一个类。

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

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

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

4

3 回答 3

8

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

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

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

如果这些规则真的被覆盖，你可能有另一个具有更高 特异性的规则。在这种情况下，您将不得不向我们展示更多您的 HTML。

于 2012-08-08T07:58:19.190 回答
1

您不应拥有多个具有相同 ID 的元素。这是无效的并且会给出未定义的结果。

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

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

于 2012-08-08T07:58:02.257 回答
0

正如您应该知道的那样，每个 id 都应该是唯一的。在您的示例输出中似乎是一个小错误。尝试将类属性设置为 div 而不是图像。如果您没有充分的理由，那么每次使用 class 属性时都应该更好。

现在是为您的图像的子项设置的文本对齐，例如，如果无法加载图像，这将是 alt 值。

于 2012-08-08T08:00:14.227 回答