расширить div до относительного верхнего левого расположения - PullRequest
Новая
       6

расширить div до относительного верхнего левого расположения

3 голосов
/ 14 марта 2012

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

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

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

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

Ответы [ 2 ]

2 голосов
/ 11 марта 2013

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

div.graph {
  display: inline-block;
}
div.graph-container {
  white-space: nowrap;
}
2 голосов
/ 14 марта 2012

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

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

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

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

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

...