divを相対左上の配置された内容に展開

Question

私はこの問題を1ページに複数のグラフ（jsPlumbに基づいて）を表示しようとしています。どのくらいのスペースがあるにせよ、各行を1行に並べて表示したいのですが、テーブルを使用しています（float：leftでdivを使用した場合、十分なスペースがない場合はdivのいくつかが別の行）。

次に各テーブルセルは、今度は二つ以上のノードdivを含むメインDIVを含んでいます。 jsPlumbの仕組みは、各ノードごとに個別のdivを作成することです。私は各ノードを親divの特定の上/左に配置する必要があります。

私が持っている問題は、各テーブルセル内のメインgraphDivがその内容に合わせて拡張していないということです。グラフノードdivのいくつかはその外側にあります。私は、あなたが絶対的な位置づけされたdivを持っているときは考慮しないことを理解しています。しかし、私は上/左の座標を持つ "相対"配置されたdivを使用しています。同じことが当てはまりますか？ もしそうなら、その内容をカバーするためにtable-cell/graphDivを拡張するにはどうすればよいでしょうか？ （私はすべての明確な修正を試み、すべてのスタックオーバーフロー関連のポストを通過しましたが、解決策を見つけることができませんでした）。ここで

は私が設定jsfiddleページへのリンクです：http://jsfiddle.net/7QkB2/28/

Answer 1

私は少しさびが、私はきちんとその内容を含むように拡張するためにdivを取得しようとしてあなたの痛みを共有しています。あなたが実際にコンテンツがために使用の穴を残している相対位置を使用する場合と同様に、このページhttp://reference.sitepoint.com/css/relativepositioningによって説明

。私はほぼ錯視のように思うだろう - オブジェクトはまだ古い位置に目に見えないブロックを予約していますが、移動したかのように見えます。

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

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

は、私はあなたの正確なアプリケーションわからないんだけど、あなたは間隔を指定する方法で創造的な取得する必要があるかもしれません。あなたが次元を知っているなら、あなたはいつもそれらを指定することができますが、私はあなたがそれが幸運ではないと推測しています。左上隅を基準に相対位置を設定したいのですか、または他のノードとの相対位置を設定したいのですか？私はたぶん昔ながらのマージンを使っています。これにより、ブロックモデルを維持しながら、テーブルに収まる必要のあるコンテンツの位置を指定できるようになります。次に、重なり合うノードの1つが必要な場合は、絶対配置を使用して配置します。

Answer 2

あなたはインラインブロックとして各divを表示し、囲みdivの行折り返しをオフにしましたか？動的な幅のコンテンツをラッピングせずに横方向に表示したい場合は、テーブルに依存する必要はありません。

div.graph { 
    display: inline-block; 
} 
div.graph-container { 
    white-space: nowrap; 
}