具有相同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無效？

回答

相關問題