css - 限制 's width to a sibling ' s 的宽度

Question

我有一些动态生成的图表，每个图表都放在一个容器中，向左浮动:

<div class="container">
    <div class="chart"> ... </div>
</div>
<div class="container">
    <div class="chart"> ... </div>
</div>
<div class="container">
    <div class="chart"> ... </div>
</div>

例如上面的产生

我想在每个图表下方添加标题，所以我添加了同级 <div> s，像这样:

<div class="container">
    <div class="chart"> ... </div>
    <div class="caption"> ... </div>
</div>
<div class="container">
    <div class="chart"> ... </div>
    <div class="caption"> ... </div>
</div>
<div class="container">
    <div class="chart"> ... </div>
    <div class="caption"> ... </div>
</div>

这行不通，因为未指定父级的宽度会随着标题文本而增长:

那么，我怎样才能限制标题 <div>图表宽度 <div>宽度？

图表由外部 jQuery 库生成，虽然我可以使用 jQuery 获取生成图表的宽度并设置标题 <div>的宽度到那个值，我更喜欢纯 CSS 的解决方案。我还想避免插入标题 <div>进入图表<div> (尽管如此，我不确定这有什么帮助)。

我正在寻找的结果看起来更像以下内容(通过强制换行伪造的示例):

提前感谢您的任何建议。

Answer 1

您可以通过应用没有任何位置属性(顶部、底部、左侧、右侧)的绝对位置来做到这一点

仅在 Chrome、FF 和 IE10 上测试

.container {
    position: relative;
}
.caption {
    position: absolute;
}

http://jsfiddle.net/YzQcs/