垂直书写模式元素的容器使用它们的高度来计算容器的宽度答案

【问题标题】：Container of vertical writing mode elements uses their height to compute the container's width垂直书写模式元素的容器使用它们的高度来计算容器的宽度
【发布时间】：2014-03-17 17:52:07
【问题描述】：

我想要实现的是具有垂直书写模式标题的水平滚动图像。样机如下所示：

<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/

【问题讨论】：

标签： css

【解决方案1】：

似乎它不喜欢“inline-block”显示！

这是在我的浏览器上完成的：http://jsfiddle.net/zw8Gr/10/

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

【讨论】：