Html 如何使用css在div中水平和垂直对齐六个画布

我有一个div，其中有六个HTML画布。如何在一个块中水平对齐三个画布，占据屏幕的50%，在添加的图像中，如何将其他三个画布对齐到其他块的底部

我当前的代码

<div id="_jscontrol" class="chartjscontrol">
<canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
<canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
<canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
<canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
<canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
<canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
</div>

.chartjscontrol{

---

}

您所要做的就是为

画布

元素提供屏幕三分之一的宽度，宽度为

33.333%

，以及

浮动：左

您可以使用

vw

和

vh

分别代替“视口宽度”和“视口高度”，使元素占据页面总宽度和高度的100%

在我的示例中，我使用类型为（n+4）的

canvas:nth创建了一个
20px的边距。我还从每个元素的高度中减去了这个，以确保它们具有正确的高度。在我的示例中，我还为每个画布提供了一个边框，并在宽度上考虑了这一点：


.myCanvas{
显示：块；
浮动：左；
宽度：钙（33.333%-2px）；
边框：1px纯黑；
高度：计算（50vh-20px）；
}
.myCanvas:n个类型（n+4）{
边缘顶部：20px；
}
您所要做的就是为
画布
元素提供屏幕三分之一的宽度，宽度为
33.333%
，以及
浮动：左

您可以使用
vw
和
vh
分别代替“视口宽度”和“视口高度”，使元素占据页面总宽度和高度的100%

在我的示例中，我使用类型为（n+4）
的
canvas:nth创建了一个
20px的边距。我还从每个元素的高度中减去了这个，以确保它们具有正确的高度。在我的示例中，我还为每个画布提供了一个边框，并在宽度上考虑了这一点：


.myCanvas{
显示：块；
浮动：左；
宽度：钙（33.333%-2px）；
边框：1px纯黑；
高度：计算（50vh-20px）；
}
.myCanvas:n个类型（n+4）{
边缘顶部：20px；
}
您可以使用flex布局，并将最后3个对齐到
flex end


.chartjscontrol{
显示器：flex；
柔性包装：包装；
宽度：1806px；
高度：1000px；
}
帆布{
边框：1px纯黑；
}
画布：第n个子（1n+4）{
自对准：柔性端；
}
您可以使用flex布局，并将最后3个对齐到
flex end


.chartjscontrol{
显示器：flex；
柔性包装：包装；
宽度：1806px；
高度：1000px；
}
帆布{
边框：1px纯黑；
}
画布：第n个子（1n+4）{
自对准：柔性端；
}