将<div>的宽度约束为兄弟<div>的宽度</div> </div>

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/