在Google可視化圖表中使用CSS Float屬性

我有幾個使用Google可視化工具和PHP後端服務器製作的餅圖。工作得很好。在Google可視化圖表中使用CSS Float屬性

但是，如果我添加一個簡單的內聯樣式到容器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>

很明顯，您可以使用ID和類將其轉換爲完整的CSS標記。

來源

2011-12-07 Josh

可以粘貼生成它的示例代碼，並在網頁上的相關HTML/CSS？ – oli

你能分享你的CSS修正嗎？我試圖做同樣的事情，不能找出哪個類添加顯示：inline-block;至。謝謝。 –

編輯回答@MikeSimmons評論。 – Josh

之後你做了一個clearfix嗎？或者，你可以將以下樣式到div，並比較其效果：

display: inline-block;

來源

2011-12-07 14:02:47

我已經清楚下一個div。我將它改爲建議的「display：inline-block」，並且工作得很好。謝謝。任何想法爲什麼浮動不起作用？ – Josh

不知道。我沒有和GVis一起工作，所以我不知道。也許是在黑暗中拍攝的，但也許有一個腳本可以爲頂層的交互渲染一個額外的層，所以做float可能會讓佈局的流動變得困難？ –

這是有道理的。謝謝。 – Josh

在Google可視化圖表中使用CSS Float屬性

回答

相關問題