如何在html中安排这5个图表？

Question

我正在使用Google Chart Tools Angularjs来显示5个图表。我有问题以我想要的方式安排它们。我想在顶行中有4个图表，在第二行中需要1个图表。

要在顶行显示4个图表，html代码看起来像这样，它可以工作;

<div google-chart chart="Chart1" style="height:300px; width:25%;float: left;"></div>
<div google-chart chart="Chart2" style="height:300px; width:25%;float: left;"></div>
<div google-chart chart="Chart3" style="height:300px; width:25%;float: left;"></div>
<div google-chart chart="Chart4" style="height:300px; width:25%;float: left;"></div>

当我想在第二行显示第五张图表时出现问题。我使用的代码看起来像这样;

<div google-chart chart="Chart1" style="height:300px; width:25%;float: left;"></div>
<div google-chart chart="Chart2" style="height:300px; width:25%;float: left;"></div>
<div google-chart chart="Chart3" style="height:300px; width:25%;float: left;"></div>
<div google-chart chart="Chart4" style="height:300px; width:25%;float: left;"></div>
<div google-chart chart="Chart5" style="height:300px; width:25%;"></div>

在网页上的任何地方都无法看到第5张图表。如何使用html在下一行显示第5张图表？

感谢您的帮助。

Answer 1

您可以使用具有相同样式的第5张图表

style="height:300px; width:25%;float: left;"

请参阅example at jsbin。