dt 요소 인 이미지 캡션을 얻으려고하므로 dt 요소만큼 넓습니다. 너비를 사용하고 디스플레이를 사용하고 싶지 않습니다. 인라인 및 플로트 : 왼쪽이 작동하지 않습니다. 여기에 코드와 예제가 있습니다 : http://jsfiddle.net/PnyHs/11/. Firefox 9를 테스트하고 있습니다.html dd 요소에 줄 바꿈이 없음
제가 지금 생각해 볼 수있는 유일한 해결책은 javascript를 사용하여 dt 요소를 측정하고 그 너비를 dd 요소로 설정하는 것입니다.
미리 도움을 청하십시오.
내가이 불가능하고, 여기 왜 말을 감히, max-width를 사용하여 HTML의 구조를 유지하지하려면 : 당신은 img을 기대하고
dd 요소를 제한하는 개체입니다. 그러나 두 요소는 형제이며 부모에 의해 폭의 측면에서만 제한 될 수 있습니다 (대안 적으로 요소는 자식에 의해 확장 될 수 있음). 따라서 dd은 부모 요소가이를 제한하지 않기 때문에 원하는만큼 확장됩니다.
물론 이것은 부모 요소의 너비를 설정하여 해결할 수 있지만 사진의 크기가 다르기 때문에 부모 요소의 너비를 설정하면 해결할 수 있습니다.
불행히도 HTML 구조를 변경하지 않으면 자바 스크립트 없이는 불가능합니다 (여기서 명백한 것이 빠져있는 경우는 예외입니다).
감사합니다. 내 생각과 발견과 일치하기 때문에 나는이 대답을 주었다. 사실 자바 스크립트로 문제를 해결했습니다. –
dl 요소에 너비를 추가 할 수 있습니까? 이 같은 이미지와 동일한 폭 http://jsfiddle.net/PnyHs/12/
이미지 너비가 다를 수 있으므로 너비를 사용하고 싶지 않습니다. 비록 이것이 가능하다면 나는 확실하지 않다. 위에서 언급했듯이 나의 최후의 수단은 자바 스크립트를 사용하여 예제에서와 같이 너비를 동적으로 설정하는 것입니다. –
나는 본다. 당신이 말한대로 너비를 알지 못한다면 불행히도 html/css만으로는 가능하지 않다고 생각합니다. – MrMisterMan
방금 200px의 '최대 너비'를 추가하여 절충안을 사용해 보았습니까? – MrMisterMan
이미지에 마크 업을 사용하면 캡션이 인공적이며 스타일을 더 쉽게 지정할 수 없습니다. 스크립팅이나 이미지 너비를 명시 적으로 설정하지 않아도되는 문제 (캡션을 이미지와 동일하게 만드는)에 대한 유일한 접근 방식은 caption 요소가있는 단일 셀 테이블을 사용하는 것입니다 (fiddle 및 my page on image captions 참조). 예 :
<table class="photo">
<caption align="bottom">Image Caption with a very very very very very long
text</caption>
<tr><td>
<img title="" alt="" src="http://dummyimage.com/120x100/82d91f/fff">
</td></tr>
</table>
html을 변경하지 않고이 문제를 해결하고 싶습니다. 링크를 가져 주셔서 감사합니다. –
이것은보기가 더 어렵습니다. IE7을 지원해야합니까? – thirtydot
예, IE7 지원이 필요하며 올바른 것입니다. 보이는 것보다 더 어렵습니다. 내가 HTML을 변경하지 않고 다른 해결책을 알기 때문에 나는 약간의 자바 스크립트로 내 문제를 해결했다. –