Using CSS Float property with Google Visualization

问题:

I have several Pie Charts made using Google Visualization tools and a PHP backend server. Works just fine.

However, if I add a simple inline style to the container div (specifically the float:left style) the chart loses all interactivity. It draws fine, it just won't highlight anything when there is a mouse-over or popup with a tooltip (normal GVis behavior).

Basically, I was wondering what was happening technically, and what would be a workaround. The end result should be two pie charts side-by-side with a third one below.

Thanks.

---

Here's the working Div structure and CSS markup for future posterity.

<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>

Obviously you can convert this to full CSS Markup using the id's and classes.

回答1:

Did you do a clearfix afterwards? Alternatively, you can apply the following style to the div and compare its effect:

display: inline-block;