垂直書寫模式元素的容器使用它們的高度來計算容器的寬度

Question

我試圖實現的是具有垂直書寫模式字幕的水平滾動圖像。該樣機看起來是這樣的：

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

當我嘗試做圖題的寫作模式，垂直，容器（）似乎仍然使用標題的原始寬度（垂直高度）來計算其寬度。所以數字之間有差距。

我可以指定容器的顯式寬度以消除間隙。我想知道容器的寬度是否適合其內容的更好方法。

這裏是的jsfiddle：http://jsfiddle.net/XGC2B/1/

這裏是最低版本：http://jsfiddle.net/zw8Gr/1/

Answer 1

看來它並沒有像 'inline-block的' 顯示器！

這並不在我的瀏覽器：http://jsfiddle.net/zw8Gr/10/

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