Два Div рядом друг с другом, где идентификаторы содержат изображение

Question

Как правило, float работает для меня, где я могу просто плавать влево или вправо. Однако на этот раз я работаю с Google Charts, и этот код использует getElementByID. Затем каждый идентификатор div содержит изображение диаграммы. Моя цель - разместить две диаграммы рядом друг с другом, но то, что заканчивается, заключается в том, что диаграмма, которая должна находиться на левой стороне, просто исчезает.

До сих пор я пытался использовать float в стиле и классе для div. Кажется, что не работает. Я не уверен, правильно ли я это делаю, однако я получил float для работы раньше в других документах, поэтому я собираюсь предположить, что мне нужно использовать другой подход для этой ситуации.

Могу вставлять код при необходимости. Каково решение для размещения двух разделов рядом друг с другом, когда оба идентификатора содержат диаграмму Google?

EDIT: Вот паста моего кода http://pastebin.com/frhhEDYt

Answer 1

Попробуйте положить родительский контейнер с двумя диаграммами в нем, укажите width и каждой диаграммы как в JS, так и CSS, установите каждый график как block (чтобы обеспечить также кросс-браузер), float их, очистить следующие строки. Не забудьте установить для указанного контейнера width достаточное количество контейнеров. Если его 100%, он будет следовать ширине окна/родительской ширины или если значение будет меньше, чем ширина диаграмм в целом, одна диаграмма будет ниже.

Вот мой jsfiddle для него: http://jsfiddle.net/JSwth/

Надежда это помогает.

Answer 2

Возможно, выложите их с таблицей, чтобы начать, если поплавки не работает? Это, по крайней мере, должно быть уверенным, что это стиль, в результате которого исчезает второй график, а не API Google Chart.

Эта нить может помочь, тоже (это адрес Google Charts использования с двумя картами напрямую): 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