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 に答える