向左浮动的可滚动 div 仍然包裹在其兄弟之下

Question

我们有一个 FusionCharts 应用程序，我们希望在其中以列显示图表。一种特定类型的图表将始终显示在最左边的列中，一个 div 向左浮动，id 为"hlineargauges-container"。在此旁边，我想向左浮动另一个容器 "whatifcharts-container"，该容器又包含两个列 div "whatifcharts-container-left" 和 "whatifcharts-container-right"，我们将在其中根据计数器交替放置。

下面是创建 div 和放置图表的 Javascript/jQuery 的 sn-p。请原谅我现在已经内联样式，由于我们的应用程序的部署方式，我通常会等到我的 UI 工作完善后再将内容提取到类中。

chartPlacementDiv = jQuery("#charts-" + chartPlacement); //either "top" or "bottom"

if (chartPlacementDiv.children('div').length == 0) { //because we are in a for loop
    chartPlacementDiv.append('<div id="hlineargauges-container" style="float:left">');
    whatifChartsContainerDiv = jQuery('<div id="whatifcharts-container" style="float:left; overflow: scroll">');
    chartPlacementDiv.append(whatifChartsContainerDiv);
    whatifChartsContainerDiv.append('<div id="whatifcharts-container-left" style="float:left">');
    whatifChartsContainerDiv.append('<div id="whatifcharts-container-right" style="float:left">');
}

chartEl = jQuery('<div></div>').attr('id', chartConfig.renderAt);

if (chartConfig.type == "hlineargauge") {
    jQuery("#hlineargauges-container").append(chartEl);
}
else {
    if (++whatifChartsCount % 2) {
        jQuery("#whatifcharts-container-left").append(chartEl); 
    }
    else {
        jQuery("#whatifcharts-container-right").append(chartEl);
    }
}

下面是生成的图表，但屏幕有点窄。如您所见，尽管向左浮动，并且尽管滚动（并且滚动条可见），id="whatifcharts-container" 还是包裹在 id="hlineargauges-container" 下方，而不是放在它的右侧。我尝试将display:inline-block 添加到whatIfChartsContainerDiv，但这没有任何区别。

Answer 1

问题是#whatifcharts-container + #hlineargauges-container 的宽度大于视口的宽度。您可能需要设置这些容器的宽度。例如：

<div id="hlineargauges-container" style="width: 33%; float: left;">
  <!-- Charts go here -->
</div>
<div id="whatifcharts-container" style="width: 66%; float: left;">
  <!-- Charts go here -->
</div>

这是一个做作的小提琴：https://jsfiddle.net/2re1mmn5/