兩個Div彼此相鄰，其中ID包含圖像

Question

通常情況下，浮動適用於我，我可以向左或向右浮動。不過，這次我正在使用Google Charts，並且此代碼使用getElementByID。然後每個div ID包含一個圖表的圖像。我的目標是將兩個圖表放在一起，但最終發生的情況是應該在左側的圖表消失。

到目前爲止，我已經嘗試在div的樣式和類中使用float。這兩個似乎都沒有工作。我不知道我是否正確地做了，但是我已經在其他文檔中得到了浮動工作，所以我將假設我需要針對這種情況採用不同的方法。

如果需要，我可以粘貼代碼。當兩個ID包含Google圖表時，將兩個div放在一起的解決方案是什麼？

編輯：這裏是我的代碼糊狀http://pastebin.com/frhhEDYt

Answer 1

嘗試把帶有兩個圖表的父容器，指定JS和CSS中的每個圖表的width和height，設置每個圖表作爲block（爲了確保跨瀏覽器），float他們，清除下一行。不要忘記爲容器設置足夠的指定width以包住圖表。如果它將遵循窗口的/父寬度，或者如果該值低於總的圖表寬度，則一個圖表將低於該圖表的寬度。

這裏是我的jsfiddle吧：http://jsfiddle.net/JSwth/

希望它幫助。

Answer 2

也許佈置它們有一張桌子，開始，如果浮子不能正常工作？這至少會確保導致第二個圖表消失的風格，而不是Google Charts API。

這個線程可以幫助，太（這解決谷歌圖表直接與兩個圖表使用）：How to add two Google charts on the one page?

Answer 3

#chart_div{ 
    width:250px; 
    float:left; 
} 
#chart_div2{ 
    width:250px; 
    float:left; 
} 

<script type="text/javascript" src="https://www.google.com/jsapi"> 
</script> 

<div id="chart_div"> 
</div> 
<div id="chart_div2"> 
</div> 
<div id="chart_div3"> 
</div> 

// Load the Visualization API and the piechart package. 
google.load('visualization', '1.0', { 
    'packages': ['corechart'] 
}); 

// Set a callback to run when the Google Visualization API is loaded. 
google.setOnLoadCallback(drawChart); 

// Callback that creates and populates a data table, 
// instantiates the pie chart, passes in the data and 
// draws it. 
function drawChart() { 

    // Create the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Topping'); 
    data.addColumn('number', 'Slices'); 
    data.addRows([ 
     ['Mushrooms', 3], 
     ['Onions', 1], 
     ['Olives', 1], 
     ['Zucchini', 1], 
     ['Pepperoni', 2] 
    ]); 
    // Create the data table. 
    var data2 = new google.visualization.DataTable(); 
    data2.addColumn('string', 'Topping'); 
    data2.addColumn('number', 'Slices'); 
    data2.addRows([ 
     ['Mushrooms', 3], 
     ['Onions', 1], 
     ['Olives', 15], 
     ['Zucchini', 1], 
     ['Pepperoni', 2] 
    ]); 

    var data3 = new google.visualization.DataTable(); 
    data3.addColumn('string', 'Year'); 
    data3.addColumn('number', 'Sales'); 
    data3.addColumn('number', 'Expenses'); 
    data3.addRows([ 
     ['2004', 1000, 400], 
     ['2005', 1170, 460], 
     ['2006', 860, 580], 
     ['2007', 1030, 540] 
    ]); 

    // Set chart options 
    var options = { 
     'title': 'How Much Pizza I Ate Last Night', 
     'width': 250, 
     'height': 200 
    }; 
    // Set chart options 
    var options2 = { 
     'title': 'How Much Pizza You Ate Last Night', 
     'width': 250, 
     'height': 200 
    }; 
    // Set chart options 
    var options3 = { 
     'title': 'Line chart', 
     'width': 250, 
     'height': 200 
    }; 

    // Instantiate and draw our chart, passing in some options. 
    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    var chart2 = new google.visualization.PieChart(document.getElementById('chart_div2')); 
    chart2.draw(data2, options2); 
    var chart3 = new google.visualization.LineChart(document.getElementById('chart_div3')); 
    chart3.draw(data3, options3); 

} 

我創建了一個箱子給你請使用此鏈接 http://codebins.com/codes/home/4ldqpc5