html - 如何并排对齐多个饼图？

Question

我是 HTML5 的新手。我使用 Chart.js 生成 3 个饼图，但它们是垂直显示的。我想要的是水平并排对齐这 3 个图表。

任何人都可以阐明这一点吗？

<div id="aligned">
  <div class="label">Aligned</div>
  <div class="chart_container">
     <canvas  id="myChart" width="300px" height="200px"></canvas>
  </div>

  <div class="chart_container">
    <canvas  id="myChart2" width="300px" height="200px"></canvas>
  </div>

      <div class="chart_container">
    <canvas  id="myChart1" width="300px" height="100px"></canvas>
  </div>
</div>

Answer 1

使它们成为行内元素。

Div 通常不是内联元素，因此要么将 div 更改为内联元素，要么更改 css 中的 div。

  display: inline-block;

如果您需要更多指导，请提供 jsfiddle。