javascript - float 到左侧的可滚动 div 仍然包裹在其兄弟下方

Question

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

下面是创建 div 和放置图表的 Javascript/jQuery 片段。请原谅我现在已经内联样式，由于我们的应用程序的部署方式，我通常会等到我完善了此类 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 的宽度大于视口(viewport)的宽度。您可能需要为这些容器设置宽度。例如:

<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>

这是一个人为的 fiddle :https://jsfiddle.net/2re1mmn5/