expand div to relative top-left position contents

Question

У меня есть эта проблема, когда я пытаюсь показать несколько графиков (на основе jsPlumb) на одной странице. Поскольку я хочу, чтобы каждый график находился рядом друг с другом на одной строке, независимо от того, сколько места доступно, я использую таблицу (если я использовал divs с float: left, если недостаточно места, некоторые из divs перемещаются вниз на отдельном ряд).

Теперь каждая ячейка таблицы содержит главный div, который, в свою очередь, содержит два или более узла-div. Способ работы jsPlumb заключается в создании отдельного div для каждого узла. Мне нужно поместить каждый узел в определенный верхний/левый относительно его родительского div.

Проблема заключается в том, что основной graphDiv в каждой ячейке таблицы не расширяется, чтобы соответствовать его контенту. Некоторые из делений графического узла находятся за его пределами. Я понимаю, что когда у вас есть «абсолютные» позиционированные divs, они не учитываются. Но я использую «относительные» позиционные divs с верхними/левыми координатами. Используется ли одно и то же? Если да, то каким будет лучший способ для меня расширить table-cell/graphDiv, чтобы охватить его содержимое? (я пробовал все ясные исправления и прошел через все связанные с переполнением стека сообщения, но не смог найти решение).

Вот ссылка на jsfiddle страницу я создал: http://jsfiddle.net/7QkB2/28/

Answer 1

Я немного ржавый, но я разделяю вашу боль в попытке получить дивы правильно расширить, чтобы содержать их содержимое.

Как объясняется на этой странице http://reference.sitepoint.com/css/relativepositioning, когда вы используете относительное позиционирование, вы фактически оставляете за собой отверстие, где раньше был контент. Я бы подумал об этом почти как о оптической иллюзии. Объект по-прежнему резервирует невидимый блок в своем прежнем положении, но кажется, что он переместился.

Итак, в вашем случае 3 узла по-прежнему сложены в верхнем левом углу графика, хотя они выглядят так, будто они плавают за его пределами. Если вы избавитесь от абсолютного и относительного позиционирования на узлах, вы увидите, что размер таблицы достаточно большой, чтобы соответствовать их исходным позициям.

Я бы рекомендовал обычно использовать только положение, если вы перемещаете контент только на несколько пикселей. Почему они спроектировали css для работы таким образом, для меня загадка, но, возможно, это связано с ограничениями движков рендеринга? Когда вы используете абсолютную позицию, у объекта больше нет «ящика», занимающего место в документе. Легко разместить, но не повлияет на расстояние всего остального, как вы заметили.

Я не уверен, что ваше точное приложение, но вам может потребоваться творческий подход к тому, как вы укажете интервал. Если вы знаете размеры, которые вы всегда можете указать, но я предполагаю, что вам не повезло. Вы действительно хотите установить положение относительно левого верхнего угла или только относительно других узлов? Вероятно, я бы использовал только старомодные поля. Это должно позволить вам указать позиции содержимого, которое должно соответствовать таблице, при сохранении модели блока. Затем, если вам нужен один из узлов для перекрытия, поместите его, используя абсолютное позиционирование.

Answer 2

Вы пробовали отображать каждый div как встроенный блок и отключать перенос строк на прилагаемом div? Вам не нужно прибегать к таблицам, если вы хотите, чтобы контент с динамической шириной отображался горизонтально без упаковки.

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