Положение HTML-элементов внутри изотопа div

Question

Положение HTML-элементов внутри изотопа div

0

Я играю с библиотекой изотопов js, и у меня есть общая концепция. Моя проблема возникает, когда я помещаю нормальный html/css, такой как входы и диаграммы в изотопном div, который не ведет себя так, как я ожидал. Этот html работает как ожидалось вне изотопа div.

Когда щелкают изотопный div, я расширяю его и показываю детали для этого элемента, включая входы, диаграммы и т.д.

Моя цель:

Сделайте таблицу, содержащую входные данные, видимыми в jsfiddle.
Поймите, почему это происходит, поэтому я могу разместить любое содержание, которое мне нравится в будущем.

JsFiddle показывает ответ

Код:

Css, который вызывал проблему. Добавив звездочку, это говорит, что он применил стиль к всем дочерним элементам. Поэтому причина, по которой моя таблица не показывалась, заключалась в том, что таблица, строки, ячейки, элементы были абсолютно позиционированы.

.containerDiv * {
            margin: 0px;
            position: absolute;
        }

Решение css (примените относительное положение к элементам таблицы):

#chartFilters * {
                position: relative;
            }

John 19 фев. 2014, в 23:57

Источник

Теги:

html

css

jquery-isotope

1 ответ

Ещё вопросы

John · Accepted Answer · 2014-02-20T19-55-00.000Z

Я быстро поработал над CSS и решил свою проблему - см. Вопрос для обновленной скрипки. Был очень простой, в конце концов, он, вероятно, выглядел тяжело из-за моего вопроса, поэтому почему в течение последних 24 часов не было ответов от сообщества.

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

Шаги, которые я использовал для решения:

1.) Первый полезный шаг, который я нашел, - это проверить элемент с помощью Internet Explorer, щелкнув правой кнопкой мыши на странице. Затем используйте параметр правой кнопки мыши в источнике, который он показывает, чтобы скопировать элемент со стилями. Это дало мне меньшую версию html для тестирования, которую я сохранил в автономном html.

2.) Я начал вытаскивать html-элементы, которые оказались несвязанными, и сделать образец проще. Как только я что-то вытащил, я обновил html в IE и проверил, что произошло.

3.) Когда у меня был простой html, я увидел абсолютное позиционирование и звездочку, затем я быстро сделал google, чтобы найти этот вопрос в стеке, объясняя, что делает звездочка.

4.) Мне нужно оставить абсолютный стиль таким образом, чтобы изотоп работал, но я могу указать относительное позиционирование внутри изотопа, я сделал это, используя теперь звездочку, теперь я знаю, что она делает! :)

#chartFilters * {
                position: relative;
            }