我有一个带有数据的表格和一个可视化此数据的图形（chart.js）。 该图为“画布”类型。 我不能让他们彼此相邻。
我尝试过：
...都给出错误的结果。 Float：left仅在表旁边放一点图形，在同一div中完全没有变化，并且column-count的行为有点像float-left。
<script src="/Chart.js"></script>
<article>
<h2>my data</h2>
<table><caption>nice data</caption><thead>
<tr><th>some value</th><th>%</th><th>more values</th></tr></thead>
<tbody>
<tr><td>€ 100,00</td><td>17,59%</td><td>10 0 09 39 09 </td></tr>
<tr><td>€ 250,00</td><td>5,86%</td><td>0 79 7 35 5 </td></tr>
<tr><td>€ 10 000,00</td><td>5,48%</td><td>09 09 36 56 05 </td></tr>
<tr><td>€ 100 000,00</td><td>5,01%</td><td>79 35 85 94 03 </td></tr>
<tr><td>€ 107,50</td><td>4,11%</td><td>89 69 49 09 53 </td></tr>
<tr><td>€ 1 000,00</td><td>3,06%</td><td>28 06 15 51 20 </td></tr>
<tr><td>€ 2 500,00</td><td>2,79%</td><td>10 39 77 17 25 </td></tr>
</tbody></table>
<div style="height:80vh;"><canvas id="bedrag_perc"></canvas></div>
<script>
var ctx = document.getElementById("bedrag_perc");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: [100, 107, 250, 1000, 10000, 100000, 3.14],
datasets: [{
label: 'so much data',
data: ['17.59', '4.11', '5.86', '3.06', '5.48', '5.01', '41.11'],
}]
},
options: {
animation: { duration: 0 },
responsive: true,
maintainAspectRatio: false
}
});
</script>
</article>
如果屏幕足够宽，我想在表格旁边放置图形，否则在彼此的下方（响应式网页设计）。
实际结果是图表的一半仅位于表格旁边。