세로 쓰기 모드 컨테이너는 컨테이너 높이를 사용하여 컨테이너의 너비를 계산합니다.

Question

내가 달성하고자하는 것은 세로 쓰기 모드 캡션이있는 가로 스크롤 이미지입니다. 모형은 다음과 같습니다 : 나는 그림 캡션의 쓰기 모드가 수직 만들려고하면

<figure> 
    <div class="image"></div> 
    <figurecaption> 
    <p class="vertical">This is the caption text.</p> 
    </figurecaption> 
</figure> 

는, 컨테이너()는 여전히 폭을 계산하는 캡션의 원래 폭 (수직의 높이)를 사용하는 것 같다. 그래서 숫자 사이에는 간격이 있습니다.

간격을 제거하기 위해 컨테이너의 명시적인 너비를 지정할 수 있습니다. 컨테이너가 내용에 맞게 너비를 가질 수있는 더 좋은 방법이 있는지 궁금합니다. http://jsfiddle.net/zw8Gr/1/

Answer 1

이는 '인라인 블록'표시를 좋아하지 않는 것 같다 다음은 최소 버전이 http://jsfiddle.net/XGC2B/1/

: 여기

는 jsfiddle입니다!

이 내 브라우저에 작업을 수행합니다 http://jsfiddle.net/zw8Gr/10/

p.vertical { 
    -webkit-writing-mode: vertical-rl; 
}