可滾動的div浮動到左邊仍然包裹在其兄弟之下

Question

我們有一個FusionCharts應用程序，我們希望以列顯示圖表。一種特定類型的圖表將始終顯示在最左側的列中，一個div向左浮動，其ID爲"hlineargauges-container"。在此旁邊，我想浮動左另一個容器"whatifcharts-container"，這反過來將包含兩個專欄"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寬度大於視口寬度。您可能需要設置這些容器的寬度。例如：

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