小编use*_*761的帖子

我在Zurb的Foundation框架中使用Highcharts进行课堂项目.我在章节标签中有三个图表.一个在12列div中,另外两个在6列div中的同一行.

当页面加载时,特色图表不占用12列的可用宽度,两个较小的图表溢出它们的6列.但是,当窗口调整大小或我尝试使用Inspect元素进行调查时,图表会立即捕捉到正确的尺寸.在Chrome,FF和IE中会出现此问题.

我意识到我可以设置一个特定的宽度,但我真的想利用基金会并让他们保持敏感.

我已经调整了CSS和Highcharts初始化,但我很难过.还有其他人遇到过这个问题吗？任何人都能看到我错过的东西吗？

这是我的HTML的摘录:

<div class="row">
<div class="twelve columns">
    <!--begin tabs below--> 
    <div class="section-container tabs" data-section="tabs">
      <section>
        <p class="title" data-section-title><a href="#">Heart Disease</a></p>
        <div class="content" data-section-content id="heart">

            <div class="row feature-chart">
                <div class="large-12 columns">
                    <div id="heartTimeline-container">
                    <div id="heartTimeline"></div>
                    </div>
                </div> <!--close 12 columns-->
            </div> <!--close row-->
            <div class="row small-charts">
                <div class="large-6 columns">
                    <div id="heartDemo"></div>
                </div>
                <!--close 6-->
                <div class="large-6 columns">
                    <div id="heartStages"></div>
                </div>
                <!--close 6-->
            </div>
            <!--end row-->
        </div>
      </section>
   </div>
   </div>
   <!--end twelve columns-->

这是Highcharts js:

$(function () {
    Highcharts.setOptions({ …