css - 如何将 Highcharts 容器以 2 行排列？

Question

我不知道该怎么做；以前从未接触过 CSS，而且实验几乎不成功。

我用 Highcharts 绘制了各种图表，放入 div 中；我希望将它们全部排成两行，因为现在它们显示在一行中。

我尝试添加一个新的 div，并将 2 个 div 包含在另一个主 div 中，并使用 float；在这种情况下，图表是并排的，但我不能在它们之间添加一些空间

这是我目前所拥有的；图表大小是 530 x 200，所以 2 并排应该占用 1060px，我已经将它的主 div 设置为 1200px，所以应该有足够的空间。我在这里做错了什么？

<style>
        #main {
            width: 1200px ;
            margin: 0 auto;
        }
        #chart_1 {
            width 530px;
            min-height: 200px;
            float:left;
        }
        #chart_2 {
            width 530px;
            min-height: 200px;
            float:left;
        }
        .clear:after {
            clear: both;
            display: table;
            content: "";
        }       
</style>

<div id="main" class="clear">
        <div id="chart_1""></div> 
        <div id="chart_2""></div>
</div>

Answer 1

<style>
        #main {
            width: 1200px;
            margin: 0 auto;
        }
        #chart_1 {
            width: 530px; /*<-- missing colon tag here */
            min-height: 200px;
            float:left;
        }
        #chart_2 {
            width: 530px; /*<-- missing colon tag here */
            min-height: 200px;
            float:left;
        }
        .clear:after {
            clear: both;
            display: table;
            content: "";
        }       
</style>

<div id="main" class="clear">
        <div id="chart_1"></div> <!-- Additional quote after id -->
        <div id="chart_2"></div> <!-- Additional quote after id -->
</div>

fiddle link