3

1 つのページに複数のグラフ (jsPlumb に基づく) を表示しようとすると、この問題が発生します。使用可能なスペースに関係なく、各グラフを 1 つの行に並べて配置したいので、テーブルを使用しています (float:left で div を使用した場合、十分なスペースが使用できない場合、div の一部は別の行に移動します)。行）。

各テーブル セルには、2 つ以上のノード div を含むメイン div が含まれます。jsPlumb が機能する方法は、ノードごとに個別の div を作成することです。各ノードを親 div に対して特定の左上に配置する必要があります。

私が抱えている問題は、各テーブルセルのメインgraphDivがそのコンテンツに合わせて拡張されないことです。一部のグラフ ノード div は、その外側にあります。「絶対」に配置されたdivがある場合、それらは考慮されないことを理解しています。しかし、私は上/左の座標を持つ「相対」配置の div を使用しています。同じことが当てはまりますか？もしそうなら、table-cell/graphDiv を拡張してそのコンテンツをカバーする最善の方法は何でしょうか? (私はすべての明確な修正を試み、すべてのスタックオーバーフロー関連の投稿を調べましたが、解決策を見つけることができませんでした)。

私が設定した jsfiddle ページへのリンクは次のとおりです: http://jsfiddle.net/7QkB2/28/

4

2 に答える 2

2

私は少しさびていますが、div を適切に展開してその内容を含めるようにする際の苦労を共有します。

このページhttp://reference.sitepoint.com/css/relativepositioningで説明されているように、相対配置を使用すると、実際にはコンテンツがあった場所に穴が残っています。私はそれを目の錯覚と考えています - オブジェクトはまだ元の位置に目に見えないブロックを保持していますが、移動したように見えます.

したがって、あなたの場合、3 つのノードは、グラフの外に浮いているように見えますが、グラフの左上隅にまだ積み上げられています。ノード上のすべての絶対位置と相対位置を取り除くと、元の位置に収まる大きさにテーブルがサイズ変更されていることがわかります。

コンテンツを数ピクセルだけ移動する場合は、通常、相対位置のみを使用することをお勧めします。彼らが css をこのように動作するように設計した理由は私には謎ですが、レンダリング エンジンの制限と関係があるのでしょうか? 絶対位置を使用すると、ドキュメント内のスペースを占有する「ボックス」がオブジェクトになくなります。配置は簡単ですが、観察したように他のものの間隔には影響しません。

正確なアプリケーションはわかりませんが、間隔を指定する方法を工夫する必要があるかもしれません. 寸法がわかっている場合はいつでも指定できますが、それほど幸運ではないと思います. 位置を左上隅に相対的に設定しますか?それとも他のノードに相対的に設定しますか? 私はおそらく昔ながらの余白を使用するでしょう。これにより、ブロック モデルを維持しながら、テーブルに収まる必要があるコンテンツの位置を指定できるようになります。次に、ノードの 1 つをオーバーラップさせる必要がある場合は、絶対配置を使用して配置します。

于 2012-03-13T23:36:45.150 に答える
2

各 div をインライン ブロックとして表示し、囲んでいる div で行の折り返しをオフにしてみましたか? 動的な幅のコンテンツを折り返しなしで水平方向に表示したい場合は、テーブルに頼る必要はありません。

div.graph {
  display: inline-block;
}
div.graph-container {
  white-space: nowrap;
}
于 2013-03-10T21:11:10.883 に答える