동일한 ID를 가진 여러 div가 잘못 되었습니까?

Question

javascript (라이브러리 없음)를 사용하는 wysiwyg 페이지를 개발 중이며 꽤 전문화 된 응용 프로그램을 가지고 있기 때문에 사용자 정의가 아닌 오페라가 있어야합니다.

놀랍게도, 나는 길을 가졌지 만 거의 완성되었습니다.하지만 디스플레이를 제대로 잡지는 못합니다.

텍스트가있는 div와 이미지가 오른쪽으로 떠있는 이미지가있어 텍스트 주위로 흐릅니다.

일부 지역에서는 이미지가 중앙에 있어야하므로 div를 삽입하여 이미지를 포함 시켰습니다.

아래 코드는 이것을 설명하며 잘 작동합니다.

div를 중심으로 표시하는 div의 ID가 동일하기 때문에 가운데있는 이미지를 포함하는 div가 두 개 이상있는 경우 문제가 발생합니다.

센터링 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가 있지만 "centreimage"는 클래스입니다.

"details"에 대한 CSS를 클래스 (& 물론 마크 업)로 변경했으며 이제 작동합니다.

내가 10 시간 이상을 써서 그 사람을 도와 주려고 고맙다고 생각할 수 없다.

Answer 1

예, 동일한 ID를 가진 div가 여러 개있는 것은 잘못되었습니다. 잘 작동합니다 클래스를 사용

: 그 규칙은 정말 오버라이드 (override)가 나타나면

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

, 당신은 아마 specificity 높은이 곳에서 다른 규칙을 가지고있다. 이 경우 HTML을 더 많이 보여줘야합니다.

Answer 2

당신은 동일한 ID를 가진 두 개 이상의 요소가 없어야합니다 O) :

(나는 "희미한 팀"나는 왜 지금 당신은 알고있다). 이는 유효하지 않으며 정의되지 않은 결과를 제공합니다.

div id를 클래스로 변경하는 경우 id가 아닌 클래스를 대상으로 적절하게 CSS를 변경해야합니다. CSS 클래스의 목적은 여러 가지 관련 요소를 대상으로 지정하고 동일한 스타일을 적용하는 것입니다.

요소를 올바르게 대상 지정하는 한 결과에는 아무런 차이가 없습니다.

Answer 3

모든 ID는 고유해야 함을 알아야합니다. 귀하의 예제 출력에서 ​​작은 오류가있을 것 같습니다. 이미지가 아닌 div에 class 속성을 설정하십시오. 당신이 돔 좋은 이유가없는 경우에 당신은 매번 종류 특성을 잘해야한다.

이제 이미지의 하위 항목에 대한 텍스트 맞춤 설정입니다. 예 : 이미지를로드 할 수없는 경우 alt 값이됩니다.