css-如何将Highcharts容器放在2行中？

我不知道如何做到这一点；以前从未做过CSS，而且实验几乎没有成功

我用海图绘制了各种各样的海图，分成几部分；我想把它们全部放在两行中，因为现在它们显示在一行中

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

这就是我目前所拥有的；图表的大小是530x200，所以并排的2应该是1060px，我把它的主分区设置为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>

#主要{
宽度：1200px；
保证金：0自动；
}
#图1{
宽度530px；
最小高度：200px；
浮动：左；
}
#图2{
宽度530px；
最小高度：200px；
浮动：左；
}
.清楚：之后{
明确：两者皆有；
显示：表格；
内容：“；
}       

#主要{
宽度：1200px；
保证金：0自动；
}
#图1{
宽度：530px/*
你能提供一个JSFIDLE吗？也许你可以尝试使用css百分比。发现了一个错误；现在图表是并排的，但不能在它们之间添加空间。弄错了：有一些填充？检查一下。你错过了
样式中两个元素的
宽度
之后的
。你还有一个
“
对于
id
之后的两个元素，谢谢Sup4；就这样！@Rohit:谢谢你对拼写错误的更正；顺便说一句，它也没有更正就正常工作了……不知道如何以及为什么
<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>