Использование свойства CSS Float с диаграммами визуализации Google

У меня есть несколько круговых диаграмм, созданных с помощью инструментов визуализации Google и внутреннего сервера PHP. Работает просто отлично.

Однако, если я добавлю простой встроенный стиль в контейнер div (в частности, стиль float:left), диаграмма потеряет всякую интерактивность. Он отлично рисует, он просто ничего не выделяет при наведении курсора мыши или всплывающем окне с всплывающей подсказкой (нормальное поведение GVis).

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

Спасибо.


Вот рабочая структура Div и разметка CSS для будущих поколений.

<div id="firstLineofCharts">
  <div id="chart1" style="display:inline-block; width:400px; height:350px;"></div>
  <div id="chart2" style="display:inline-block; width:400px; height:350px;"></div>
</div>
<div id="secondLineofCharts" style="float:clear"></div>

Очевидно, вы можете преобразовать это в полную разметку CSS, используя идентификаторы и классы.


person Josh    schedule 07.12.2011    source источник
comment
не могли бы вы вставить образец кода, который его генерирует, и соответствующий html/css на своей странице?   -  person oli    schedule 08.12.2011
comment
Можете ли вы поделиться именно тем исправлением CSS, которое у вас было. Я пытаюсь сделать то же самое и не могу понять, в какой класс добавить отображение: inline-block; к. Спасибо.   -  person Mike Simmons    schedule 06.12.2012
comment
Отредактирован вопрос, чтобы ответить на комментарий @MikeSimmons.   -  person Josh    schedule 07.12.2012


Ответы (1)


После этого делали клирфикс? Кроме того, вы можете применить к div следующий стиль и сравнить его эффект:

display: inline-block;
person U-DON    schedule 07.12.2011
comment
У меня уже было ясно на следующем div вниз. Я изменил его на предложенный дисплей: встроенный блок, и это сработало просто отлично. Спасибо. Есть идеи, почему float не работает? - person Josh; 08.12.2011
comment
Без понятия. Я сам не работал с GVis, поэтому не знаю. Может быть, выстрел в темноте, но, возможно, есть скрипт, который отображает дополнительный слой для взаимодействия поверх, поэтому использование плавающего положения может каким-то образом испортить поток макета? - person U-DON; 08.12.2011
comment
Это имеет некоторый смысл. Спасибо. - person Josh; 08.12.2011