Как я могу поместить два холста в один ряд в html?

Question

В настоящее время я работаю над проектом angular, в котором я хочу отобразить два графика в одной строке. Для отображения каждого графика я использую холст (я думаю, что это требуется диаграммой. js). К сожалению, он отображает только один холст на строку.

Я попытался выбрать холсты и поместить display:inline-block, обернуть их в отдельные элементы, а затем выполнить display:inline-block и, наконец, обернуть холсты в один элемент. Кажется, ничего не работает, и я не смог найти ответы, которые помогли бы мне.

.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

Я бы посоветовал вам использовать flexbox, о котором вы можете прочитать больше в этом превосходном CSS -Трюке.

Простое добавление 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>

Answer 2

Это невозможно только с 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 для обоих полотен. Если вы хотите изменить строку дисплея, просто поменяйте местами эти холсты или сбросьте z-index в css.