浮动到左边的可滚动div仍包裹在其兄弟

Question

我们有一个FusionCharts应用程序，我们希望在列中显示图表。一种特殊的图表将始终显示在最左侧的列中，div左侧浮动，其ID为"hlineargauges-container"。在此旁边，我想要向左移动另一个容器"whatifcharts-container"，而容器"whatifcharts-container-left"又包含两个列div "whatifcharts-container-right"和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); } } ，我们将在其中根据计数器替换展示位置。

下面是一个Javascript / jQuery片段，用于创建div并放置图表。请原谅我现在已经介绍了这个样式，由于我们的应用程序的部署方式，我通常会等到我完成这样的UI工作之后再将其提取到类中。

id="whatifcharts-container"

下面是在一个有点狭窄的屏幕上得到的图表。如您所见，尽管向左浮动，尽管滚动（并且滚动条可见），id="hlineargauges-container"包裹在display:inline-block下面而不是放在右侧。我尝试将$(function(){ $("#camera").prop("checked", true); }); 添加到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/