如何將兩個畫布放在 html 的同一行中？

Question

我目前正在處理一個 angular 項目，我想在同一行上顯示兩個圖形。 為了顯示每個圖形，我使用了畫布（我認為這是 chart.js 所必需的）。 不幸的是，它每行只顯示一個畫布。

我試圖選擇畫布並放置display:inline-block ，將它們包裹在單獨的 div 中，然后執行display:inline-block ，最后將畫布包裹在一個 div 中。 似乎沒有任何效果，我無法找到任何對我有用的答案。

 .div { display: inline-block; } .canvas { display: inline-block; } #canvas { display: inline-block; } #canvas1 { display: inline-block; } .cv { display: inline-block; } }

 <div style="width: 40%"> <canvas class="cv" id="canvas" width="100" height="100"></canvas> <canvas class="cv" id="canvas1" width="100" height="100"></canvas> </div>

Answer 1

僅使用 html 是不可能的，您必須使用 css。 以下是如何管理此問題的示例：

div {
   display: grid;
   grid-template-columns: [column0] 100% [column1]
   grid-template-rows: [row0] 100% [row1]   
}

#canvas {
   grid-area: row0 / column0 / row1 / column1;
}

#canvas1 {
   grid-area: row0 / column0 / row1 / column1;
}

所以你只需為兩個畫布分配相同的grid-area 。 如果您想更改顯示行，只需切換這些畫布的位置或在 css 中重置z-index 。

Answer 2

我建議你使用 flexbox，你可以在這篇優秀的 CSS-Tricks 文章中閱讀更多關於它的信息。

只需在您的容器類上添加display: flex將使內容在水平線上對齊（隱式flex-direction: row ，如果您希望它們堆疊在一列中，則只需添加flex-direction: column ）。

CSS：

.canvas-container {
  display: flex;
  width: 40%;
}

.cv {
  width: 100%;
  height: 100%;
}

HTML：

<div class="canvas-container">
  <canvas class="cv"></canvas>
  <canvas class="cv"></canvas>
</div>