1

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

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

例如，上述产生

样品 1

我想在每个图表下方添加标题，所以我添加了兄弟<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 class="container">
    <div class="chart"> ... </div>
    <div class="caption"> ... </div>
</div>

这不起作用，因为未指定父级的宽度会随着标题文本增长：

样品 2

那么，如何将标题<div>宽度限制为图表<div>宽度？

该图表由外部 jQuery 库生成，虽然我可以使用 jQuery 获取生成的图表的宽度并将标题<div>的宽度设置为该值，但我更喜欢纯 CSS 的解决方案。我还想避免将标题<div>注入图表<div>（不过，我不确定这有什么帮助）。

我正在寻找的结果看起来更像以下（通过强制换行符伪造的示例）：

样品 3

提前感谢您的任何建议。

4

1 回答 1

1

您可以通过应用没有任何位置属性（上、下、左、右）的绝对位置来做到这一点

仅在 Chrome、FF 和 IE10 上测试

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

http://jsfiddle.net/YzQcs/

于 2013-03-15T10:26:55.663 回答